Centro Federal de Educação Tecnológica de Minas Gerais Técnico em Informática Aplicações para WEB. Aplicações para WEB

Transcrição

1 Centro Federal de Educação Tecnológica de Minas Gerais Técnico em Informática Aplicações para WEB Aplicações para WEB Professor: Marcelo Corrêa Mussel Varginha 2016

2 .

3 Sumário Apostila de Desenvolvimento de Aplicações Web 1 HTML Introdução Sintaxe HTML Elementos HTML html head title meta body h1-h p a ul e li ol e li dl, dt e dd div span b e strong i e em small code hr br img article section header footer aside nav main audio video Favicon - Como colocar imagem no title Table Inserindo um título na tabela Caption Criando linhas na tabela - tr Criando colunas - th, td Cabeçalho e Rodapé - thead, tfoot Tag tbody Exemplo CSS Definição Regra CSS Modelo de formatação CSS Box Model CSS Box Model CSS modificado Propriedades CSS para o Box Model Categorias de valores CSS Palavra-chave

4 2.4.2 Número Número não negativo Número com unidade de medida String Notação funcional Casos especiais Cores CSS Vinculando folhas de estilo a documentos Estilos inline Estilos incorporados Estilos externos Exemplos de utilização das CSS Menu Drop-Down Abas Botões DOM e seletores CSS DOM Árvore do DOM Seletores CSS Flutuando elementos (floats) Como isto é feito? Outro exemplo : colunas A propriedade clear Posicionando elementos O princípio de posicionamento CSS Posicionamento absoluto Posicionamento relativo Construindo um exemplo Arquivo: index.html Arquivo: sobre.html Arquivo: contato.html Arquivo: layout.css Javascript Variáveis Tipos Iteração Interatividade na Web Validação na busca com JavaScript Funções temporais Exemplo: Banner rotativo Desafio Proposta de solução para o desafio Desafio Proposta de solução para o desafio jquery Características de execução jquery Selectors Filtrando elementos com jquery Efeitos de exibir e esconder conteúdo Utilitário de iteração do jquery Executar somente após carregar Exemplos de utilização jquery

5 4.8.1 Exemplo 1 - carregamento de páginas dinâmico Exemplo 2 - janela modal simples Exemplo 3 - método load() jquery UI Exemplo 1: Calendário Exemplo 2: Calendário com ícone para ativar Exemplo 3: Abas Exemplo 4: Menu Sanfona Exemplo 5: Janela Modal Exemplo 6: Arrastar, soltar e ordenar Bibliografia 96

6 .

7 1 HTML 1.1 Introdução Apostila de Desenvolvimento de Aplicações Web HTML é a sigla em inglês para HyperText Markup Language, que significa linguagem para marcação de hipertexto. Portanto, HTML não deve ser equivocadamente chamado de linguagem de programação. Hipertexto é todo texto inserido em um documento para a web e que tem como principal característica a possibilidade de se interligar a outros documentos da web através da utilização de links. Quando a HTML foi inventada, em 1992 por Tim Berners-Lee, os conteúdos eram essencialmente hipertextos, com a hipermídia (imagens, vídeos, gráficos, sons e conteúdos não textuais) surgindo posteriormente. Assim, hoje, a HTML é uma linguagem para marcação de conteúdos web em geral. Desde a sua invenção a HTML evoluiu por oito versões que são: HTML HTML+ HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.0 HTML 4.01 HTML5 Tecnicamente, o W3C considera oficialmente somente as versões HTML 2.0, HTML 3.2, HTML 4.0, HTML 4.01 e HTML5. As versões HTML e HTML+ são anteriores à criação do W3c e a versão 3.0 não chegou a ser lançada oficialmente, transformando-se na versão 3.2. O World Wide Web Consortium, ou W3C, é um consórcio internacional com quase 400 membros, entre eles, empresas, órgãos governamentais e organizações independentes que têm por objetivo definir padrões destinados à criação de conteúdos para a web.

8 1.2 Sintaxe HTML Apostila de Desenvolvimento de Aplicações Web Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisição e recebeu como corpo da resposta o seguinte conteúdo: Centro Federal de Educação Tecnológica Bem-vindo ao CEFET-MG unidade Varginha. Confira os cursos oferecidos em nossa unidade: Técnico em Informática. Técnico em Edificações. Técnico em Mecatrônica. Engenharia Civil. Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos reproduzir esse conteúdo em um arquivo texto comum, que pode ser criado com qualquer editor de texto puro. Salve o arquivo como index.html e abra-o a partir do navegador à sua escolha. Figura 1: Documento sem formatação (marcação HTML) O resultado não foi o esperado. Apesar do navegador ser capaz de exibir texto puro, algumas regras devem ser seguidas caso desejemos que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário final. Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho de texto tenha uma marcação indicando qual é o significado dele. Essa marcação também influencia a maneira com que cada trecho do texto será exibido. A seguir é listado o texto com uma marcação correta: 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 <head> 4 <title>centro Federal de Educação Tecnológica</title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <h1>centro Federal de Educação Tecnológica</h1> 9 <h2>bem-vindo ao CEFET-MG unidade Varginha.</h2> 10 <p>confira os cursos oferecidos em nossa unidade:</p> 11 <ul > 12 <li>técnico em Informática.</li> 13 <li>técnico em Edificações.</li> 14 <li>técnico em Mecatrônica.</li> 15 <li>engenharia Civil.</li> 16 </ul> 17 </body> 18 </html> Reproduza o código anterior em um novo arquivo de texto puro e salve-o como index-2.html.

9 Figura 2: Documento formatado (com marcação HTML) Código comentado: Linha Linha 1 Linhas 2 e 18 Linhas 3 e 6 Linha 4 Linha 5 Linhas 7 e 17 Linhas 8 e 9 Linha 10 Linhas 11 a 16 Descrição Declaração do tipo de documento (doctype). Essa linha informa ao navegador que a marcação a seguir é do tipo HTML. A declaração de DOCTYPE não é uma tag HTML. Tags de abertura e fechamento html. Esse é o chamado elemento raiz do documento,e é quem engloba toda a marcação HTML. Na tag de abertura desse elemento, linha 2, existe a declaração lang= pt-br. Isso é o que denominamos par atributo/valor sendo lang o atributo e pt-br o seu valor. Essa declaração é muito importante para fornecer informação do idioma em que a página foi escrita para tecnologias assistivas, tal como um leitor de tela que, sabendo o idioma, poderá ler a tela com a pronúncia adequada. Tags de abertura e fechamento do elemento head. Essa é a chamada seção HEAD do documento, e, dentro dela, são admitidos vários outros elementos HTML, entre eles, no mínimo os dois elementos conforme descritos a seguir. Tags de abertura e fechamento do elemento title. Ele se destina a ter como conteúdo o título do documento, importante para que mecanismos de busca e indexação, encontrem-na. Tag meta destina-se a fornecer informações adicionais sobre o documento. No nosso exemplo, indicamos a codificação utf-8, e essa declaração é de uso obrigatório na seção HEAD do documento. Tags de abertura e fechamento do elemento body. Tudo o que estiver nessa seção será renderizado pelo navegador e mostrado para o usuário. As tags de heading são tags de conteúdo e vão de <h1> a <h6>, seguindo a ordem de importância, sendo <h1> o título principal, o mais importante, e <h6> o título de menor importância. Utilizamos, por exemplo, a tag <h1> para o nome, título principal da página, e a tag <h2> como subtítulo ou como título de seções dentro do documento. A ordem de importância, além de influenciar no tamanho padrão de exibição do texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexação de conteúdo para buscas, como o Google, Bing ou Yahoo! levam em consideração essa ordem e relevância. Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento. marcação mais indicada para textos comuns é a tag de parágrafo. Se você tiver vários parágrafos de texto, use várias dessas tags <p> para separá-los. Criação de uma Lista não Numerada

10 1.3 Elementos HTML html Apostila de Desenvolvimento de Aplicações Web Ele é o elemento raiz do documento que engloba as seções HEAD e BODY head Ele se destina a marcar a seção cabeçalho do documento. Veremos mais adiante que é nesta seção que definiremos, ou indicaremos o caminho, dos códigos JavaScript e CSS title Se destina a marcar o título do documento meta Se destina a fornecer informações adicionais sobre o documento, tais como a codificação de caracteres, o nome do autor e outras body Tudo que está dentro dessa seção será renderizado pelo agente de usuário (por exemplo: navegador) h1-h6 Eles são do tipo nível de bloco e destinam-se a marcaros textos de títulos e subtítulos dos conteúdos do documento p Ele é do tipo nível de bloco e se destina a marcar parágrafos a Esse elemento é do tipo inline e se destina a marcar links. Exemplo: 1 <a href=" Unidade Varginha</a> Essa marcação cria um link para o site da Unidade Varginha do CEFET-MG. O atributo href possui o valor com o endereço que será carregado quando o usuário clicar no link ul e li Esses elementos são do tipo nível de bloco e se destinam a marcar listas que são chamadas de listas não ordenadas, ou não numeradas. 1 <ul> Exemplo: 2 <li>carros</li> 3 <li>cores</li> 4 <li>frutas</li> 5 <li>paises</li> 6 </ul>

11 Essa marcação cria uma lista com quatro itens. No início de cada item da lista é renderizado, por padrão, um círculo (bolinha cheia) que se denomina bullet. Na sintaxe para marcação de listas, o elemento ul é um container para os elementos li que marcam cada item da lista. É possível criar listas aninhadas, nas quais um item da lista pode conter subitens e estes seus subitens e assim indefinidamente em diversos níveis de aninhamento. 1 <ul> Exemplo: 2 <li > Carros 3 <ul> 4 <li>honda</li> 5 <li>audi</li> 6 <li>ferrari</li> 7 </ul> 8 </li> 9 <li>cores</li> 10 <li > Frutas 11 <ul > 12 <li>abacate</li> 13 <li>laranja</li> 14 <ul > 15 <li>lima</li> 16 <li>seleta</li> 17 <li>baía</li> 18 </ul> 19 <li>uva</li> 20 </ul> 21 </li> 22 <li>paises</li> 23 </ul> ol e li Esses elementos são do tipo nível de bloco e se destinam a marcar listas que são chamadas de listas ordenadas ou numeradas. Notar que o container para listas ordenadas é ol e a marcação é semelhante à mostrada anteriormente. A diferença é que, em lugar dos bullets gráficos, as listas ordenadas são renderizadas com números ou opcionalmente com outros tipos de marcador de ordenação dl, dt e dd Esses elementos são do tipo nível de bloco e se destinam a marcar listas que são chamadas de listas de definição. 1 <dl> Exemplo: 2 <dt>heavy Metal</dt> 3 <dd>iron Maiden</dd> 4 <dd>black Sabbath</dd> 5 <dd>metallica</dd> 6 <dt>progressivo</dt> 7 <dd>jethro Tull</dd> 8 <dd>pink Floyd</dd> 9 <dd>rush</dd> 10 <dt>blues</dt>

12 11 <dd>b.b.king</dd> 12 <dd>robert Johnson</dd> 13 <dd>allman Brothers</dd> 14 </dl> O container geral de uma lista de definição é o elemento dl. Essa marcação cria uma lista de definição com três itens chamados de termos de definição (elementos dt) cada um deles com um ou mais termos descritivos (elementos dd) div Esse é um elemento do tipo nível de bloco e se destina a criar um container geral para outros elementos. É um elemento sem destinação específica, ou seja, diferentemente dos elementos h1 e p, por exemplo, que se destinam a marcar cabeçalhos de nível 1 e parágrafos respectivamente, esse elemento pode conter (marcar) qualquer outro elemento em qualquer quantidade e até mesmo outros elementos div. Elementos com essas características são chamados de elementos sem valor semântico. Semântica é um aspecto de alta relevância em marcação HTML e diz respeito ao correto uso do elemento para marcar conteúdo. 1 <div> Exemplo: 2 <h3>informativo</h3> 3 <p>este site destina-se a fornecer detalhes sobre...</p> 4 </div> Nesse exemplo, a presença do container div em nada altera a renderização do cabeçalho de nível 3 e do parágrafo. Para efeito de renderização é como se o elemento div não estivesse presente na marcação. Então para que serve o div? Conforme veremos adiante, o div poderá servir, entre outras inúmeras coisas, para determinar a região do documento que receberá uma formatação específica com o uso da CSS (bordas, fundo colorido...) span Esse é um elemento do tipo inline e destina-se a criar um container geral para outros elementos inline. É um elemento sem destinação específica e pode conter (marcar) qualquer outro elemento inline em qualquer quantidade e até mesmo outros elementos span. Tal como o elemento div, esse elemento é sem valor semântico. A diferença deste para o elemento div é que se trata de um elemento inline enquanto div é um elemento nível de bloco. Exemplo: 1 <p>texto de um paragrafo com <span>palavra</span> marcada com o elemento SPAN</p> Nesse exemplo a presença do container span em nada altera a renderização do texto palavra contido no parágrafo. Para efeito de renderização é como se o elemento span não estivesse presente na marcação. Então para que serve span? Conforme veremos adiante, o span poderá servir, entre outras inúmeras coisas, como uma espécie de caixa para que seu conteúdo seja renderizado em uma cor diferente, ou com um tamanho de letra diferente. Isso deverá ser feito com o uso das CSS.

13 b e strong Apostila de Desenvolvimento de Aplicações Web Estes elementos são do tipo inline e causam o mesmo efeito de renderização, mas têm valor semântico diferente. Quando aplicados a um pequeno trecho de texto ou palavra, ambos causam renderização em negrito. Use o elemento b para dar aspecto visual negrito e use o elemento strong para dar forte ênfase. Para entender a diferença, suponha um internauta com visão normal e um internauta deficiente visual navegando com um leitor de tela. A marcação com o elemento b somente terá efeito (negrito) para o internauta com visão normal e a marcação com elemento strong terá efeito (negrito e forte ênfase) para os dois, pois além de negrito, o leitor de tela lerá o conteúdo de strong com voz em forte ênfase, e o internauta deficiente visual saberá que aquele trecho foi destacado pelo autor do documento. Exemplo: 1 <p>texto utilizando <b>palavra em negrito</b> marcada com o elemento B</p> 2 <p>texto utilizando <strong>palavra com forte enfase</strong> marcada com o elemento STRONG</p> i e em Esses elementos são do tipo inline e causam o mesmo efeito de renderização, mas têm valor semântico diferente. Quando aplicados a um pequeno trecho de texto ou palavra, ambos causam renderização em itálico. Use o elemento i para dar aspecto visual itálico às letras e use o elemento em para dar ênfase.a justificativa de uso é semelhante àquela descrita para os elementos b e strong no item anterior. Exemplo: 1 <p>texto utilizando <i>palavra em italico</i> marcada com o elemento I</p> 2 <p>texto utilizando <em>palavra com enfase</em> marcada com o elemento EM</p > small Esse é um elemento do tipo inline e se destina a marcar pequenos trechos de texto. A renderização de textos marcados com esse elemento é feita com tamanho de fonte menor do que o do texto no qual foram marcados. Notas sobre direitos autorais no rodapé do site e pequenas notas de advertência são conteúdos para se marcar com o elemento small. Exemplo: 1 <h3>valores de diarias</h3> 2 <dl> 3 <dt>quarto de solteiro</dt> 4 <dd>r$320,00 <small>cafe da manha incluso</small></dd> 5 <dt>quarto de casal</dt> 6 <dd>r$490,00 <small>cafe da manha incluso</small></dd> 7 </dl> code Esse é um elemento do tipo inline e se destina a marcar trechos de código de computador ou qualquer string que um computador reconheça. Nomes de arquivo, nome de um programa de computador, nome de um elemento HTML, trechos de código tais como mostrados nos exemplos são conteúdos para se marcar com o elemento code. A renderização de textos marcados com esse elemento normalmente é

14 feita com tipo de fonte monoespaçada, diferente da fonte do texto no qual foram marcados. Exemplo: 1 <p>os elementos <code>div</code> e <code>span</code> da HTML nao tem valor semantico.</p> hr Esse elemento é do tipo nível de bloco e destina-se a criar uma linha reta horizontal de 1px. Trata-se de um elemento vazio, isto é, existe apenas sua tag de abertura <hr>. A simples presença da tag de abertura é suficiente para criar uma linha horizontal. Exemplo: 1 <p>trecho de um texto qualquer</p> 2 <hr>  3 <p>trecho de outro texto qualquer</p> OBS: As tags <! navegador br > criam um comentário no documento. Não são renderizadas pelo Esse é um elemento vazio e existe apenas sua tag de abertura <br> e destina-se a criar uma quebra de linha. Múltiplos elementos br criam múltiplas quebras de linha. A simples presença da tag de abertura é suficiente para criar uma quebra de linha. Exemplo: 1 <p>primeiro Texto</p> 2 <p>segundo Texto</p> 3 <br><br>  4 <p>terceiro Texto</p> Não existe um elemento próprio para criar espaçamentos entre palavras (ou letras) de um texto. Existe o que chamamos de uma entidade HTML (caractere codificado) para obter tal efeito. Tratam-se das entidades e que, quando colocadas entre palavras (ou letras) de um texto, criam um espaço em branco. Exemplo: 1  2 <p>texto de um paragrafo</p> ou 1  2 <p>texto de um paragrafo</p> img Esse é um elemento inline e vazio e destina-se a inserir uma imagem no documento. O uso desse elemento exige no mínimo a inserção de dois atributos. Exemplo: 1 <img src="imagem.jpg" alt="imagem de uma paisagem qualquer">

15 Esse exemplo insere uma imagem e o atributo src recebe como valor o endereço onde se encontra a imagem, e o atributo alt fornece uma descrição sumária da imagem. A descrição destina-se a ser lida pelos leitores de tela e outros softwares assistivos. Notar que até o leitor, mesmo sem ver a renderização, é capaz de fazer uma ideia de como seja a imagem article Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdos que possam ser distribuídos, reutilizados e entendidos isoladamente, como um post em um fórum, um comentário em blog, um widget interativo ou, finalmente, qualquer conteúdo independente de um documento. Exemplo: 1 <article> 2 <h1>computador Pessoal</h1> 3 <p> Um computador pessoal ou PC (Personal Computer) refere-se a um computador de pequeno porte e baixo custo... </p> 4 <p> Continua o texto em outro paragrafo... </p> 5 </ article > section Esse é um elemento do tipo nível de bloco e destina-se a criar um container genérico para conteúdos. Se houver necessidade de um container somente para fins de aplicação de regras de estilo, use o elemento div e não section. Use section de forma geral, quando o uso de article ou de outro elemento não for apropriado. Exemplo: 1 <section> 2 <h1>estacao de trabalho</h1> 3 <article> 4 <h2>computador</h2> 5 <p>o computador... </p> 6 </ article > 7 <article> 8 <h2>impressora</h2> 9 <p>a impressora... </p> 10 </ article > 11 </ section > header Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdos introdutórios e de auxílio à navegação. Em geral, esses elementos contêm um cabeçalho dos níveis h1 a h6 e podem incluir também tabela de conteúdo (índice), formulário de busca, informações complementares e logotipo. Exemplo: 1 <article> 2 <header> 3 <h1>computador Pessoal</h1> 4 <p>publicado em: 01/02/2016</p> 5 </header> 6 <p>um computador pessoal ou PC (Personal Computer) refere-se a um computador de pequeno porte e baixo custo... </p> 7 <p> Continua o texto em outro paragrafo... </p> 8 </ article >

16 footer Apostila de Desenvolvimento de Aplicações Web Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdos de rodapé. Em geral esses elementos contêm informações sobre quem escreveu o conteúdo, links para conteúdos relacionados e informações sobre direitos autorais. Exemplo: 1 <article> 2 <header> 3 <h1>computador Pessoal</h1> 4 <p>publicado em: 01/02/2016</p> 5 </header> 6 <p>um computador pessoal ou PC (Personal Computer) refere-se a um computador de pequeno porte e baixo custo... </p> 7 <p> Continua o texto em outro paragrafo... </p> 8 <footer> 9 <p>copyright Todos os direitos reservados</p> 10 </ footer > 11 </ article > aside Esse é um elemento do tipo nível de bloco e destina-se a marcar conteúdo relacionado a outro conteúdo. Em geral, esses elementos são usados para marcar barras laterais de conteúdos, blocos de conteúdos relacionados a outro conteúdo, mas visualmente separados. Existem dois contextos distintos de uso desse elemento. Quando dentro de um elemento article, seu conteúdo deve estar relacionado ao conteúdo daquele elemento. Quando fora do elemento article, seu conteúdo deve estar relacionado ao conteúdo do site ou da página, como um banner de propaganda ou links de navegação. Exemplo: 1 <article> 2 <header> 3 <h1>computador Pessoal</h1> 4 <p>publicado em: 01/02/2016</p> 5 </header> 6 <p>um computador pessoal ou PC (Personal Computer) refere-se a um computador de pequeno porte e baixo custo... </p> 7 <p> Continua o texto em outro paragrafo... </p> 8 <aside>  9  10 </aside> 11 </ article > <aside>  14  15 </aside> nav Esse é um elemento do tipo nível de bloco e destina-se a marcar o mecanismo principal de navegação da página, contendo links para outras páginas ou para partes da mesma página. Existem dois contextos distintos de uso desse elemento. Quando dentro de um elemento article, seu conteúdo deve estar relacionado ao conteúdo daquele elemento. Quando fora do elemento article,

17 seu conteúdo deve estar relacionado ao conteúdo do site ou da página, como um banner de propaganda ou links de navegação. Exemplo: 1 <nav> 2 <ul> 3 <li><a href="/">home</a></li> 4 <li><a href="/historia.html">historia</a></li> 5 <li><a href="/artigos.html">artigos</a></li> 6 <li><a href="contato.html">contato</a></li> 7 </ul> 8 </nav> main Esse é um elemento do tipo de nível de bloco e destina-se a marcar a seção do documento que contém o assunto principal da página. Não devem ser inclusos dentro desse elemento conteúdos tais como o topo da página, o rodapé da página e os links da navegação audio Esse é um elemento do tipo nível de bloco e destina-se a inserir um som ou stream de áudio. Exemplo: 1 < audio controls > 2 <source src="som.ogg" type="audio/ogg"> 3 <source src="som.mp3" type="audio/mpeg"> 4 <source src="som.wav" type="audio/wave"> 5 <p>seu navegador nao suporta o elemento audio da HTML5.<br> 6 Faca <a href="som.zip">download de som.zip</a></p> 7 </audio> video Esse é um elemento do tipo nível de bloco e destina-se a inserir um vídeo. Exemplo: 1 < video controls > 2 <source src="video.ogv" type="video/ogg"> 3 <source src="video.mp4" type="video/mp4"> 4 <source src="video.webm" type="video/webm"> 5  6 <p>seu navegador nao suporta o elemento video da HTML5.<br> 7 Faca <a href="video.zip">download do video</a></p> 8 </video> 1.4 Favicon - Como colocar imagem no title Acesse o site (gerador de favicon), escolha o tamanho 32x32 ou 48x48, clique em Selecionar Arquivo, selecione e clique em Creat Icon, clique em Download FavIcon e pronto, só salvar. E insira o seguinte código antes da tag </head> 1 <link rel="shortcut icon" href="favicon.ico" >

18 1.5 Table Apostila de Desenvolvimento de Aplicações Web Toda tabela deve ser iniciada com o elemento básico de abertura e fechamento chamado table. OBS:No HTML5 não precisamos fechar as tags: <tbody>, <thead>, <tfoot>, <tr>, <th>, <td>, visto a seguir Inserindo um título na tabela A opção summary está obsoleta, portante não devemos utilizar. Obs.: Ela está obsoleta em XHTML1.1, porém no HTML5 é possível usá-la com algumas restrições. O W3C indica utilizar apenas o caption, descrito a seguir Caption Esse elemento é responsável pelo título/legenda da tabela. É ela que vai apresentar o que a tabela tem que transmitir para o usuário Criando linhas na tabela - tr Para criar as linhas na tabela utilizamos o elemento <tr>. Cada linha da tabela precisa ser criada, porém, cada linha pode ter muitas colunas. Todas as linhas abertas com o elemento <tr> devem ser fechadas com </tr>. OBS: Ao criar apenas linha(s) sem coluna(s) não aparecerá nada na página Criando colunas - th, td Para criar colunas em uma linha podemos utilizar 2 (dois) elementos, são eles: th e td. Mas quando utilizar o elemento TH e/ou TD? A principal diferença entre estes elementos é a seguinte: Geralmente as colunas da primeira linha e última linha utilizamos as tags TH, isso devido ao fato que estas tags deixam o conteúdo em negrito. A primeira linha e a última são marcadas pelos elementos THEAD(cabeçalho) e TFOOT(rodapé), respectivamente. Essa é a principal diferença entre elas. Serve como diferenciação do resto do conteúdo da tabela, onde utilizamos os elementos TD Cabeçalho e Rodapé - thead, tfoot Um conceito novo é a utilização de cabeçalho e rodapé na tabela. Essas tags devem ser utilizadas em conjunto com a tag TH para deixar as letras destacadas. thead: Esse elemento é extremamente importante. Ele é o cabeçalho da tabela. É ele que vai mostrar o que a coluna ou linha tem que apresentar ao usuário. Você deve criar cada linha com tr e th para as células dentro. tfoot: Usado bastante em tabelas grandes, essa tag deve conter as mesmas informações do thead, assim o usuário, ao chegar no final, não se perderá com as informações. Obs: Ela não precisa ser o último elemento dentro do elemento table, tal como seu nome indica, mas no entanto deve ser colocado logo após o thead. Mas porque inserir um rodapé na tabela? Ao fazer uma tabela dinâmica (montada automaticamente com dados provenientes de uma base de dados) não sabemos quantas linhas essa tabela terá. Ok, mas no que isso implicará? O usuário ao navegar em um site com uma tabela gigantesca terá que voltar sempre ao topo do site para visualizar qual é o cabeçalho correspondente a coluna que ele está

19 visualizando. Inserindo um rodapé ele pode recorrer também ao rodapé Tag tbody Nesse novo conceito de tabela utilizamos um elemento específico para o corpo da tabela, no caso o TBODY. Todas as linhas que forem linhas de conteúdo devem ficar entre os elementos TBODY e /TBODY. É dentro dessa tag que ficará o conteúdo, o corpo, da sua tabela, onde irá as famosas tr e td, que serve para criar linha e célula, respectivamente. Obs.: Você pode, e deve quando necessário, usar th dentro do tbody para colocar a primeira célula como sendo responsável para dizer o conteúdo relacionado à linha Exemplo html 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 <head> 4 <title>tabelas</title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <table> 9 <caption>catalogo da Metal & Cia</caption> 10 <thead> 11 <tr><th colspan="4">tabela de precos</th></tr> 12 </thead> 13 <tfoot> 14 <tr><td colspan="4">visite nossa loja</td></tr> 15 </tfoot> 16 <tbody> 17 <tr > 18 <td rowspan="2"> Seminovos</td> 19 <td>trompete</td> 20 <td>trombone</td> 21 <td>trompa</td> 22 </tr> 23 <tr > 24 <td>$500</td> 25 <td>$640</td> 26 <td>$650</td> 27 </tr> 28 </tbody> 29 </table> 30 </body> 31 </html> css 1 table, td, th, tfoot { 2 border:solid 1px #000; 3 padding:5px; 4 } 5 th { 6 background-color:#999; 7 }

20 8 caption { 9 font-size:x-large; 10 } 11 colgroup { 12 background:#f60; 13 } Figura 3: Tabela com estilização

21 2 CSS 2.1 Definição Apostila de Desenvolvimento de Aplicações Web CSS é a abreviação para o termo Cascading Style Sheet, traduzido como folha de estilo em cascata. Folha de estilo em cascata é um mecanismo simples para adicionar formatação (por exemplo: fontes, cores, espaçamentos) aos documentos web.[site do W3C]. A HTML foi criada para ser uma linguagem exclusivamente de marcação e estruturação de conteúdos. Segundo seus idealizadores, não compete à HTML fornecer informações ao navegador sobre a apresentação dos elementos, por exemplo: cores de fontes, tamanhos de textos, posicionamentos e todo o aspecto visual de um documento não devem ser funções da HTML. Cabem à CSS todas as funções de apresentação de um documento, e essa é sua finalidade maior. HTML para estruturar os conteúdos e CSS para apresentá-los. 2.2 Regra CSS Regra CSS (ou regra de estilo ou de estilização) é a unidade básica de uma folha de estilo. Uma regra CSS é composta de duas partes : o seletor e a declaração. A declaração compreende uma propriedade e um valor. Exemplo: 1 seletor { propriedade: valor; } Seletor - É o elemento ou elementos da marcação HTML nos quais a regra CSS será aplicada. Declaração - Determina os parâmetros de estilização. Compreende a propriedade e o valor. Propriedade - Define qual será a característica do seletor a ser estilizada. Valor - É a quantificação ou a qualificação da estilização da propriedade. Uma regra CSS, escrita conforme a sintaxe mostrada, poderá conter várias declarações separadas por ponto-e-vírgula. 1 p { Exemplo: 2 color: white; 3 background-color: black; 4 font-size: 14px; 5 } Seletor - É o elemento p (parágrafo). Declarações Propriedades - São três: color, que define a cor dos textos; background-color, que define a cor de fundo; e font-size, que define o tamanho da fonte. Valores - São três: white, que define a cor branca; black, que definea cor preta; e 14px, que define o tamanho da fonte igual a 14 pixels.

22 Ocorre com frequência a necessidade de estilizar vários seletores com as mesmas declarações de estilos. Nesses casos, a sintaxe CSS permite que os seletores sejam agrupados. Para criar um agrupamento de seletores, separamos um do outro através de vírgula. Exemplo: 1 h2, p, ul, em { font-size: 18px; } A regra acima define um tamanho de fonte igual a 18 pixels para os conteúdos textuais dos elementos h2, p, ul e em. Quando o valor de uma propriedade for uma palavra composta, separada por espaços, deve-se usar sinais de aspas duplas ( ) ou, alternativamente, de aspas simples ( ), conforme mostrado no exemplo a seguir: 1 p { 2 font-family: "Times New Roman"; 3 } 1 p { ou 2 font-family: Times New Roman ; 3 } 1 p { Não se usam aspas em palavras compostas separadas por hífen: 2 font-family: Sans-serif; 3 } Um componente facultativo, mas de grande utilidade, é a inserção de comentários. Comentário em uma linha: 1 /* Comentario em uma linha */ Bloco de comentário 1 /* Bloco de comentario contendo 2 varias linhas para explicar 3 as funcionalidades definidas 4 na regra CSS */ 2.3 Modelo de formatação CSS No modelo CSS cada elemento cria um caixa, dentro da qual está inserido o conteúdo do elemento. Se o elemento for nível de bloco, a caixa tem a largura igual à linha (ocupa toda a largura da tela) e altura suficiente para acomodar o conteúdo. Se inline, a caixa tem a largura do conteúdo.

23 2.3.1 Box Model CSS O Box Model CSS descreve os boxes criados pelos elementos da marcação HTML. Figura 4: Diagrama do Box Model CSS No diagrama destacamos uma área mais interior, denominada área dos conteúdos, cujas dimensões (largura e altura) são definidas pelas propriedades CSS width e height. Segue uma área chamada de enchimento, cuja espessura é definida pela propriedade CSS padding. Em volta do enchimento, temos uma borda cuja espessura, cor e tipo são definidos por border. Finalmente, um espaço denominado margem com espessura definida pela propriedade margin. A área da margem é sempre transparente. As dimensões da área de conteúdos dependem de uma série de fatores, entre eles a definição explícita de dimensões, natureza do conteúdo e o tipo do conteúdo. A propriedade CSS background define o fundo a ser aplicado nas áreas de conteúdo, de enchimento e da borda. Exemplo: HTML <body> 3 <p> Lorem ipsum dolor sit amet... </p> 4 </body> 5... CSS 1 body { 2 margin: 0; 3 padding: 0; 4 font-size: 20px; 5 } 6 p { 7 width: 400px; 8 text-align: justify; 9 line-height: 1; 10 background: #f6f6f6; 11 margin: 20px 80px 100px 40px; 12 border: solid #ccc; 13 border-width: 10px 30px 50px 15px; 14 padding: 35px 50px 20px 0; 15 } Na imagem abaixo apresentamos a renderização do código conforme o Box Model CSS.

24 Figura 5: Box Model CSS Box Model CSS modificado A propriedade width refere-se à largura do conteúdo do box, o que ocorre é que a largura total do box acaba sendo variável em relação à propriedade width, já que a ela são acrescidas as larguras de padding e border (que são variáveis) para se obter a largura total. O mesmo ocorre com relação à altura do box. As CSS3 criaram uma nova propriedade denominada box-sizing, capaz de alterar esse comportamento padrão do Box Model, fazendo com que as larguras de padding e border sejam incluídas na largura width declarada por regra CSS. Para modificar o comportamento do Box Model para todos os boxes, inclua na folha de estilo do seu projeto a seguinte regra CSS. 1 html{ 2 box-sizing: border-box; 3 } 4 *, *:before, *:after{ 5 box-sizing: inherit; 6 } OBS: O símbolo * é chamado de seletor universal e representa todos os elementos da marcação.

25 A imagem abaixo mostra a renderização do mesmo box do exemplo anterior com a inclusão da regra modificadora do Box Model. Figura 6: Box Model CSS modificado Observe que a largura do conteúdo no Box Model tradicional é igual ao valor declarado para width (400px), já no Box Model modificado passa a ser igual ao valor declarado para width (400px) menos as larguras de border (15px + 30px) e padding (0 + 50px) Propriedades CSS para o Box Model O box criado no modelo é um quadrilátero em que cada um dos lados é identificado, ver figura 4. Ao definirmos a regra CSS para margin, border-width ou padding começamos com o lado superior e seguimos no sentido horário (top, right, bottom e left). Propriedade margin A propriedade margin define as dimensões das margens de um box. Pode-se definir cada uma das margens individualmente: 1 margin-top: 20px; 2 margin-right: 30px; 3 margin-bottom: 5px; 4 margin-left: 10px; ou usar a sintaxe abreviada: 1 margin: 20px 30px 5px 10px; /*na ordem descrita anteriormente */ A declaração abreviada admite ainda as seguintes variações: Se as quatro margens são iguais, declare um valor: 1 margin: 20px; /* margem de 20px nos quatro lados */ Se as quatro margens são iguais duas a duas, declare dois valores: 1 margin: 15px 10px; /* margens superior e inferior de 15px e direita e esquerda de 10px */ Ou apenas direita e esquerda iguais, declare três valores:

26 1 margin: 20px 10px 15px; /* margem superior de 20px margens direita e esquerda de 10px e margem inferior de 15px */ Propriedade padding A propriedade padding define as dimensões do enchimento (ou espessura) entre o conteúdo e a borda. Pode-se definir cada um dos quatro enchimentos individualmente: padding-top, padding-right, padding-bottom, padding-left ou utilizar a sintaxe abreviada conforme descrito na propriedade margin. Propriedade border A propriedade border define a espessura, o estilo e a cor das bordas do box. border-width: Define a espessura da borda. 1 border-top-width: 2px; 2 border-right-width: 3px; 3 border-bottom-width: 4px; 4 border-left-width: 1px; ou usar a sintaxe abreviada: 1 border-width: 2px 3px 4px 1px; Define-se a espessura da borda declarando uma medida CSS de comprimento ou usando as palavraschave thin, medium e thick, obtendo as espessuras de bordas fina, média e grossa. border-color: Define a cor da borda 1 border-top-color: red; 2 border-right-color: yellow; 3 border-bottom-color: black; 4 border-left-color: cyan; ou usar a sintaxe abreviada: 1 border-color: red yellow black cyan Para declarar a cor da borda, usa-se um dos valores CSS para cores ou o valor transparent. border-style: Define o estilo da borda. 1 border-top-style: solid; 2 border-right-style: ridge; 3 border-bottom-style: double; 4 border-left-style: inset; ou usar a sintaxe abreviada: 1 border-style: solid ridge double inset; Pode-se aplicar nove estilos para bordas ou declarar o valor none para definir ausência de bordas. Na prática, a declaração none é muito usada para retirar bordas colocadas por padrão ou declaradas anteriormente em elementos específicos da marcação ou, ainda, retirar a borda-padrão colocada em imagens que são links.

27 Estilo none hidden dotted dashed solid double groove ridge inset outset Apostila de Desenvolvimento de Aplicações Web Descrição Define espessura 0 para a borda. O mesmo efeito de none, mas com precedência na resolução de bordas conflitantes. Borda pontilhada. Borda tracejada. Borda contínua ou sólida. Borda constituída de duas linhas contínuas. A soma das espessuras das linhas com a do espaço que as separa é igual ao valor de border-width. Borda com aparência entalhada. Borda com aparência de ressalto. Borda em baixo relevo. Borda em alto relevo. border: Define abreviadamente a borda. 1 border-top: 1px solid red; 2 border-right: 2px ridge yellow; 3 border-bottom: 4px double black; 4 border-left: 6px inset cyan; ou usar a sintaxe abreviada para bordas que sejam iguais nos quatro lados: 1 border: 2px dotted white; Ao usar a declaração abreviada border, não é obrigatório declarar os três valores, assim as regras CSS mostradas abaixo são válidas: 1 border: 5px; 2 border: dotted; 3 border: red; 4 border: 2px double; 5 border: solid red; 6 border: 4px blue; Os valores não declarados são interpretados pelo navegador como sendo o valor inicial da propriedade: 1 border-width: medium; 2 border-style: none; 3 border-color: /* o mesmo valor da propriedade color do elemento em que se aplica a borda */ Como o valor inicial para o estilo da borda é none (nenhum), concluímos que declarações abreviadas que omitem o estilo da borda, como as mostradas a seguir, isoladamente, não produzem nenhum efeito. 1 border: 5px; 2 border: red; 3 border: 4px blue; Podemos combinar essas declarações com outras, obtendo um interessante método de estilização: 1 border: 4px blue; 2 border-style: solid dotted groove double; ou ainda: 1 border: solid blue; 2 border-width: 5px 8px 10px 2px;

28 2.4 Categorias de valores CSS Apostila de Desenvolvimento de Aplicações Web Os valores CSS podem ser definidos através de valores absolutos (ex: medida em pixels) ou valores relativos (ex: medidas em porcentagem), que irão depender de um valor de referência. Os valores CSS podem ser agrupados em oito categorias, conforme descrito a seguir: Palavra-chave Um valor CSS é do tipo palavra-chave quando expresso por uma string, predefinida nas especificações. Um exemplo desse caso é quando se utiliza palavras-chave para definir cores: 1 p{ 2 color: red; 3 background-color: acqua; 4 border-color: teal; 5 } Os valores red, acqua e teal são palavras-chave para cores, previstas nas especificações para as CSS3. Outros exemplos de palavras-chave para expressar valores CSS são: Palavra-chave inherit collapse italic uppercase utilização para definir uma propriedade que deverá ser herdada. para definir bordas de células de tabelas que devem ser unidas. para definir fonte em itálico. para definir texto em caixa-alta Número Pose ser expresso por um número inteiro ou real. A especificação adota a sintaxe <integer > para designar números inteiros e <number> para designar números reais. Tal como na matemática, em CSS, números podem ser precedidos dos sinais + e - para indicar o sinal positivo ou negativo do número Número não negativo Muitas propriedades CSS fazem restrição quanto à faixa de números admitidos. Como exemplo, a propriedade width, destinada a definir a largura de um elemento, não admite números negativos Número com unidade de medida Comprimento Refere-se as medidas horizontal e vertical. Um valor CSS que usa uma medida de comprimento é formado por um número seguido da abreviatura para uma unidade de medida. Por exemplo: 14px, 12em, 18pt. Se o número for zero recomenda-se não utilizar a unidade de medida. A única exceção a essa grafia é na sintaxe quando utilizamos porcentagem, sendo obrigatório indicar o sinal (0%). Medida relativa É aquela cujo valor é determinado em função de outro valor de uma propriedade que lhe serve de referência. Definir medidas relativas facilita o escalonamento e possibilita servi-la para diferentes tipos de mídia, por exemplo: para uma tela de computador ou para uma tela de um smartphone.

29 Unidade Relativa em à font-size do elemento (ou do elemento-pai). Elemento-pai é o elemento no qual um elemento está contido. ex ao valor x-height (altura da letra x minúscula) da fonte do elemento. px ao dispositivo gráfico (tela, por exemplo) de renderização. gd ao grid definido pelo layout-grid, descrito no Módulo Texto da CSS3. rem à font-size do elemento raiz do documento (html). vw à largura da viewport (área de renderização). vh à altura da viewport. vm à largura ou altura da viewport (a menor das duas). ch à largura do número 0, renderizado de acordo com font-size. Se não existir 0 na fonte especificada, a largura média dos caracteres deverá ser usada. As unidades de medida relativas nas CSS3 são mostradas a seguir: Medida absoluta Aquela cujo valor é determinado e fixo. São úteis para uso quando as dimensões físicas da mídia (tela, impressora etc.) são conhecidas. Porcentagem Unidade Descrição in polegada; 1 polegada = 2,54cm cm centímetro mm milímetro pt ponto; 1 ponto = 1/72 polegada pc pica; 1 pica = 12 pontos As propriedades CSS que admitem valores em porcentagem também definem qual o valor de referência a considerar para cálculo da porcentagem. O valor de referência pode ser o valor de outra propriedade do mesmo elemento ao qual a porcentagem foi aplicada, o de um elemento ancestral (no qual o elemento está contido) ou o valor de um contexto de formatação, como a largura de um bloco de conteúdo. Ângulo O formato para definir um valor CSS em medida angular é um número imediatamente seguido por uma unidade de medida angular, e são usados, por exemplo, para definir propriedades destinadas à mídia speech (mídia falada, tal como leitores de tela) ou às transformações previstas nas CSS3. Hora Unidade Descrição deg Graus grad Grados rad Radianos turn Volta Valores expressos em medidas de tempo são usados, por exemplo, para definir propriedades destinadas à mídia speech (mídia falada, tal como leitores de tela) ou duração de animações e transições previstas nas CSS3. frequência

30 Unidade Descrição ms Milissegundo s Segundo Valores expressos em medidas de frequência são usados, por exemplo, para definir propriedades destinadas à mídia speech. Unidade Descrição Hz Hertz khz Quilohertz String Valores CSS expressos com strings devem ser grafados com aspas simples ou duplas. Sendo da mesma grafia, uma não pode ocorrer dentro de outra, a menos que seja escapada com uma barra invertida (\). Uma string não pode conter uma quebra de linha, a menos que se use o caractere \A, que representa uma nova linha em CSS. Para fins de legibilidade, é possível quebrar uma string em substrings com uso do caractere barra invertida (\). Observe os exemplos a seguir: 1 "Esta e uma string." /*aspas simples dentro de aspas duplas */ 2 Esta e uma "string". /*aspas duplas dentro de aspas simples */ 3 "Esta e uma \"string\"." /*aspas duplas escapadas dentro de aspas duplas*/ 4 Esta e uma \ string\. /*aspas simples escapadas dentro de aspas simples*/ 5 6 "Esta string esta na primeira linha. \A E esta na segunda" 7 8 "Esta e uma string longa\ 9 que foi quebrada para\ 10 fins de legibilidade." Notação funcional Em CSS3 valores funcionais são usados para definir cores, atributos e URIs (Uniform Resource Identifier - endereço web). A sintaxe para escrita de um valor funcional é: nome da função seguido de uma lista de argumentos entre parênteses. 1 p { background-color: rgb(255, 0, 0); } 2 img { margin-top: attr(height, px); } 3 div { background-image: url( } Nos três exemplos acima, os valores das propriedades CSS, em destaque no código, são do tipovalor funcional, e as respectivas funções CSS rgb, attr e url retornam um valor a ser aplicado nas propriedades definidas pelos seletores (elementos) p, img e div, respectivamente Casos especiais Valores CSS que não se enquadram em nenhuma das categorias anteriores pertencem a uma categoria denominada casos especiais. Os valores CSS enquadrados nessa categoria são os valores para definição de famílias de fontes e valores para definição de cores em sintaxe hexadecimal.

31 1 p { background-color: #f00; } ou p { background-color: #ff0000; } 2 h1 { font-family: Arial, Verdana, Sans-serif; } 2.5 Cores CSS Para definir cores em CSS, são possíveis os seguintes tipos de valores: hexadecimal, as palavraschave: transparent, currentcolor e outras palavras-chave que são o nome de algumas cores (ex: blue, red, grey, green, black...), valores RGB, RGBA, HSL, HSLA. Exemplos 1 color: #ff0000; /* hexadecimal minúsculas */ 2 color: #FF0000; /* hexadecimal maiúsculas */ 3 color: #f00; /* hexadecimal abreviada */ 4 color: pink; /* palavra-chave */ 5 color: rgb(255, 200, 32); /* RGB inteiros */ 6 color: rgb(100%, 26%, 47%); /* RGB porcentagem */ 7 color: rgba(200, 100, 57, 0.4); /* RGB inteiros com opacidade */ 8 color: rgba(90%, 86%, 37%, 0.6); /* RGB porcentagem com opacidade */ 9 color: hsl(120, 75%, 50%); /* HSL */ 10 color: hsla(120, 75%, 50%, 0.8); /* HSL com opacidade */ 11 color: transparent; /* palavra-chave */ 12 color: currentcolor; /* criada nas CSS3 */ currentcolor: Esse valor declara que a cor a ser aplicada a uma determinada propriedade CSS em um elemento é igual à cor declarada para a propriedade color de seu elemento ancestral mais próximo. Exemplo: 1 div { color: red; } 2 p { border: 1px solid currentcolor; } Todos os parágrafos contidos no div terão uma borda na cor vermelha. HSL: Criada a partir da CSS3, permite que você declare as cores com o uso de três parâmetros: (hue, saturation, lightness). O primeiro valor é para o tom (hue) da cor. O seu valor é um número que representa a medida de um ângulo (varia de 0 a 360 graus) apontando para um tom de cor na roda de cores. Exemplos: Ângulo Tons de cor 0 vermelho 60 amarelo 120 verde 180 ciano 240 azul 300 púrpura 360 vermelho 1 color: hsl(120, 100%, 50%); /* cor verde */ 2 color: hsl(120, 100%, 25%); /* cor verde-escura */ 3 color: hsl(120, 100%, 75%); /* cor verde-clara */ 4 color: hsl(120, 75%, 75%); /* cor verde pastel */ HSLA: Os três primeiros parâmetros têm o mesmo significado de HSL, e o quarto (opacidade) é um valor compreendido entre 0 e 1, onde 0 representa a transparência total, e o valor 1, opacidade total. Assim, um valor igual 0.6 significa 60% opaco ou 40% transparente.

32 2.6 Vinculando folhas de estilo a documentos As folhas de estilo podem ser escritas no próprio documento HTML ao qual serão aplicadas, ou em arquivos externos independentes Estilos inline O método direto e simples de aplicar estilos a um elemento da marcação é com o emprego do atributo style da HTML. Escreve-se as regras de estilo diretamente dentro da tag de abertura do elemento a estilizar: 1 <p style="width: 200px; color: white; background: red; font-size: 1.8em;"> 2  3 </p> Este método dificulta a manutenção e retira a possibilidade do controle centralizado da apresentação. Toda vez que for preciso alterar a apresentação, será necessário percorrer todo o código de marcação do documento à procura das regras de estilo inline Estilos incorporados Outro método de escrever a folha de estilos no próprio documento HTML é com o emprego do elemento style. Você escreve as regras de estilo dentro das tags <style></style>, declaradas na seção HEAD do documento: 1 <head> <style rel="stylesheet" type="text/css" media="all"> 4 body{ 5 margin: 0; 6 padding: 0; 7 font-size: 80%; 8 color: black; 9 background: white; 10 } 11 </style> 12 </head> Desta forma, as regras de estilização serão aplicadas somente ao documento em que estiver incorporada. Uma boa escolha para uso desse método é para o caso de aplicação de estilos específicos a um, e somente um, documento do site. Em HTML5 o uso de atributos no elemento style é facultativo Estilos externos Trata-se de um arquivo de texto contendo as regras de estilo e os comentários CSS e deve ser gravado com a extensão.css e pode ser vinculado a um documento HTML de duas maneiras distintas: Folhas de estilos lincadas: Vincula-se uma folha de estilo externa a um documento empregando o elemento link. Este elemento deve estar contido na seção HEAD do documento. 1 <head> <link rel="stylesheet" type="text/css" href="estilos.css" media="all"> </head> O atributo href aponta para o endereço no qual se encontra o arquivo da folha de estilos. Folhas de estilos importadas: Nesse método, vincula-se uma folha de estilo externa a outra folha de estilo externa usando a dentro da folha de estilo.

33 "main.css" 2 body { 3 margin: 0; 4 font: 62.5% Arial, Sans-serif; 5 } A deve preceder todas as demais regras de estilo para o documento. Havendo necessidade de vincular outras folhas de estilo ao documento, elas deverão ser importadas uma após a outra. A declaração de importação de uma folha de estilos dentro de outra deve ocupar a primeira linha da folha, exceto no caso em que se une uma declaração de codificação de caracteres da folha de estilo. A destina-se a declarar a codificação de caracteres de uma folha de estilos e deve ocupar a primeira linha da folha de estilo. "utf-8" "main.css" 3 body { 4 margin: 0; 5 font: 62.5% Arial, Sans-serif; 6 } 2.7 Exemplos de utilização das CSS3 Veremos a seguir alguns exemplos de aplicação das estilizações através das CSS Menu Drop-Down Marcação HTML para criação do menu 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 <head> 4 <title>exemplo Menu DropDown</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="menu.css" media="all"> 7 </head> 8 <body> 9 <nav> 10 <ul > 11 <li><a href="#">home</a></li> 12 <li><a href="#">tutoriais</a> 13 <ul > 14 <li><a href="#">lp2</a></li> 15 <li><a href="#">pti</a></li> 16 <li><a href="#">aplicacoes Web</a> 17 <ul > 18 <li><a href="#">html</a></li> 19 <li><a href="#">css</a></li> 20 </ul> 21 </li> 22 </ul> 23 </li> 24 <li><a href="#">artigos</a> 25 <ul > 26 <li><a href="#">web Design</a></li> 27 <li><a href="#">programacao</a></li> 28 </ul>

34 29 </li> 30 <li><a href="#">extras</a></li> 31 </ul> 32 </nav> 33 </body> 34 </html> Figura 7: Menu sem a estilização CSS Código CSS para estilização do Menu 1 nav ul ul { 2 display: none; 3 background: #5f6975; border-radius: 0px; padding: 0; 4 position: absolute; top: 100%; 5 } 6 7 nav ul li:hover > ul { 8 display: block; 9 } nav ul { 12 background: #efefef; 13 background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 14 background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 15 background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 16 box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 17 padding: 0 20px; 18 border-radius: 10px; 19 list-style: none; 20 position: relative; 21 display: inline-table; 22 } nav ul:after { 25 content: ""; clear: both; display: block; 26 } nav ul li { 29 float: left; 30 } nav ul li:hover { 33 background: #4b545f;

35 34 background: linear-gradient(top, #4f5964 0%, #5f %); 35 background: -moz-linear-gradient(top, #4f5964 0%, #5f %); 36 background: -webkit-linear-gradient(top, #4f5964 0%,#5f %); 37 } nav ul li:hover a { 40 color: #fff; 41 } nav ul li a { 44 display: block; padding: 25px 40px; 45 color: #757575; text-decoration: none; 46 } nav ul ul li { 49 float: none; 50 border-top: 1px solid #6b727c; 51 border-bottom: 1px solid #575f6a; 52 position: relative; 53 } nav ul ul li a { 56 padding: 15px 40px; 57 color: #fff; 58 } nav ul ul li a:hover { 61 background: #4b545f; 62 } nav ul ul ul { 65 position: absolute; left: 100%; top:0; 66 } Figura 8: Menu Drop-Down com estilização CSS

36 2.7.2 Abas Marcação HTML Apostila de Desenvolvimento de Aplicações Web 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 <head> 4 <title>exemplo Abas</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="abas.css" media="all"> 7 </head> 8 <body> 9 <article class="tabs"> <section id="tab1"> 12 <h2><a href="#tab1">aba 1</a></h2> 13 <p>aqui esta o conteudo da primeira aba.</p> 14 </ section > <section id="tab2"> 17 <h2><a href="#tab2">aba 2</a></h2> 18 <p>aqui esta o conteudo da segunda aba.</p> 19 </ section > <section id="tab3"> 22 <h2><a href="#tab3">aba 3</a></h2> 23 <p>aqui esta o conteudo da terceira aba.</p> 24 </ section > </ article > 27 </body> 28 </html> Figura 9: Página em abas sem a estilização CSS Código CSS para estilização das abas 1 article.tabs 2 { 3 position: relative; 4 display: block; 5 width: 40em; 6 height: 15em;

37 7 margin: 2em auto; 8 } 9 article.tabs section 10 { 11 position: absolute; 12 display: block; 13 top: 1.8em; 14 left: 0; 15 height: 12em; 16 padding: 10px 20px; 17 background-color: #ddd; 18 border-radius: 5px; 19 box-shadow: 0 3px 3px rgba(0,0,0,0.1); 20 z-index: 0; 21 } 22 article.tabs section:first-child 23 { 24 z-index: 1; 25 } 26 article.tabs section h2 27 { 28 position: absolute; 29 font-size: 1em; 30 font-weight: normal; 31 width: 120px; 32 height: 1.8em; 33 top: -1.8em; 34 left: 10px; 35 padding: 0; 36 margin: 0; 37 color: #999; 38 background-color: #ddd; 39 border-radius: 5px 5px 0 0; 40 } article.tabs section:nth-child(2) h2 43 { 44 left: 132px; 45 } article.tabs section:nth-child(3) h2 48 { 49 left: 254px; 50 } article.tabs section h2 a 53 { 54 display: block; 55 width: 100%; 56 line-height: 1.8em; 57 text-align: center; 58 text-decoration: none; 59 color: inherit; 60 outline: 0 none; 61 } 62 article.tabs section:target, 63 article.tabs section:target h2 64 { 65 color: #333; 66 background-color: #fff; 67 z-index: 2;

38 68 } 69 article.tabs section, 70 article.tabs section h2 71 { 72 -webkit-transition: all 500ms ease; 73 -moz-transition: all 500ms ease; 74 -ms-transition: all 500ms ease; 75 -o-transition: all 500ms ease; 76 transition: all 500ms ease; 77 } Figura 10: Página em abas com estilização CSS Botões Marcação HTML para criação de botões 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 <head> 4 <title>exemplo Botoes</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="botoes.css" media="all"> 7 </head> 8 <body> 9 <button class="btn btn-green">salvar</button> <a href="#" class="btn btn-purple">acessar</a> <input type="submit" class="btn btn-red" value="ok"> </body> 16 </html>

39 Figura 11: Página com botões sem a estilização CSS Código CSS para estilização dos botões 1.btn:focus,.btn::-moz-focus-inner{ 2 outline:none; 3 border:none; 4 } 5.btn{ 6 font-family: arial; 7 font-size:14px; 8 text-transform: uppercase; 9 font-weight:700; 10 border:none; 11 padding:10px; 12 cursor: pointer; 13 display:inline-block; 14 text-decoration: none; 15 } 16.btn-green{ 17 background:green; 18 color:#fff; 19 box-shadow:0 5px 0 #006000; 20 } 21.btn-green:hover{ 22 background:#006000; 23 box-shadow:0 5px 0 #003f00; 24 } 25.btn-purple{ 26 background:purple; 27 color:#fff; 28 box-shadow:0 5px 0 #670167; 29 } 30.btn-purple:hover{ 31 background:#670167; 32 box-shadow:0 5px 0 #470047; 33 } 34.btn-red{ 35 background:red; 36 color:#fff; 37 box-shadow:0 5px 0 #d20000; 38 } 39.btn-red:hover{ 40 background:#d20000; 41 box-shadow:0 5px 0 #b00000; 42 } 43.btn-green:active,.btn-purple:active,.btn-red:active{ 44 position:relative; 45 top:5px; 46 box-shadow:none; 47 }

40 Figura 12: Página com botões com estilização CSS 2.8 DOM e seletores CSS DOM DOM é a sigla em inglês para Document Object Model (Modelo de objeto de documento), e trata-se de uma convenção que, no contexto da marcação HTML, destina-se representar os componentes da marcação como objetos capazes de serem estilizados, acessados por programas e scripts e manipulados de formas variadas. O DOM é constituído de nós denominados nós do DOM. Os elementos da marcação, os atributos, os conteúdos e o próprio documento como um topo são considerados nós Árvore do DOM É uma representação gráfica da marcação do documento, mostrando o interrelacionamento entre os nós do DOM. No DOM o relacionamento entre os componentes da marcação, descrito na árvore do documento, usa também denominações adotadas em árvores genealógicas, tais como, elemento-pai, elementos irmãos, elementos descendentes, elementos ancestrais e assim por diante. Vamos elaborar o esboço de um site sobre uma banda de Rock n Roll para exemplificar o relacionamento entre os componentes da árvore DOM e dos seletores CSS. Para este exemplo, serão criadas cinco páginas, como descrito a seguir: Página principal do site (Página de apresentação) index.html Discografia (página contendo a discografia da banda) discos.html Agenda (página contendo agenda de shows) agenda.html Notícias (página contendo informações e curiosidades) noticias.html Contato (página com dados para enviar mensagens) contato.html Abaixo a marcação HTML do esboço do site. Nesse rascunho teremos um topo contendo banner, título e a barra de navegação, uma coluna com o conteúdo principal da página e um rodapé. Abra um editor e salve esse arquivo como toposite.html

41 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 <head> 4 <title>iron Maiden Fans</title> 5 <meta charset="utf-8"> 6 </head> 7 <body class="home"> 8 <header class="topo"> 9 <hgroup> 10 <h1><a href="/">site sobre o Iron Maiden</a></h1> 11 <h2>página não oficial destinada a divulgar a maior banda de heavy metal do mundo</h2> 12 </ hgroup > 13 <nav > 14 <ul > 15 <li><a class="corrente" href="home.html">home</a></li> 16 <li><a href="discos.html">discografia</a></li> 17 <li><a href="agenda.html">shows</a></li> 18 <li><a href="noticias.html">notícias</a></li> 19 <li><a href="contato.html">contato</a></li> 20 <div class="clear"></div>  21 </ul> 22 </nav> 23 </ header >  <footer class="rodape"> 28  29 </ footer > 30 </body> 31 </html> Observe que dentro da seção body existem os elementos header e footer. Diretamente dentro do elemento header existem os elementos hgroup e nav e assim por diante com os demais elementos. Observando esta marcação, veremos a árvore do documento cujo diagrama é mostrada na figura 13: Figura 13: Árvore do documento Da árvore do documento verificamos os graus de parentesco conforme alguns exemplos descritos a seguir:

42 Elemento Descrição html Elemento-pai de head e body e elemento-ancestral de todos os elementos da marcação. hgroup e nav Elementos-filho do elemento header, logo, elementos-irmãos. a Elementos-descendentes de ul. h1 Elemento-irmão-adjacente do elemento h2. header Não é elemento-irmão de meta. li Não é elemento-descendente de hgroup, mas é descendente dos elementos nav, header, body e html. Arquivo para estilização toposite.css 1 * { 2 margin: 0; 3 padding: 0; 4 } 5 body { 6 font-size: 18px; 7 font-family: arial, sans-serif; 8 line-height: 1.4; 9 } 10 hgroup > h1 { 11 font-size: 36px; 12 margin-top: 12px; 13 margin-bottom: 12px; 14 } 15 hgroup a { 16 color: #c30; 17 text-decoration: none; 18 } 19 h1 ~ h2 { 20 font-size: 27px; 21 margin-top: 14px; 22 margin-bottom: 14px; 23 color: #090; 24 } 25 nav > ul { 26 margin-left: 50px; 27 } 28 nav > ul > li:first-child > a { 29 color: #c60; 30 text-decoration: none; 31 } 32 nav > ul > li:first-child > a:hover { 33 color: #555; 34 text-decoration: underline; 35 } 36 nav > ul > li:last-child { 37 font-size: 26px; 38 list-style-type: square; 39 } 40 nav > ul > li:nth-child(3) { 41 background: #ccc; 42 }

43 2.8.3 Seletores CSS CLASSES E IDS Apostila de Desenvolvimento de Aplicações Web Para possibilitar uma organização melhor da página e da seleção de elementos por CSS, podemos utilizar classes e/ou ids para identificar tags. Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é utilizada para identificar elementos estruturais da página. Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr mais de uma classe em um elemento). É perfeitamente possível fazer um site apenas com ids, apenas com classes, com uma combinação das duas, ou sem nenhuma das duas. Tudo irá depender do seu estilo de fazer o código das páginas. O importante é definir um padrão e segui-lo. SELETORES Muito do poder da linguagem CSS está nos seletores. Com os seletores, conseguimos escolher qualquer elemento (ou elementos) na página para aplicar estilos. Vejamos primeiro os principais tipos de seletores: Seletor de tipo: Com este seletor, selecionamos todas as tags de um mesmo tipo. Por exemplo, se digitamos h1 estaremos selecionando todas as tags h1 da página e poderemos aplicar estilos a elas. Útil para estilos gerais, mas para maior especificidade utilizamos outros seletores. Seletor descendente: Com este seletor, podemos escolher um ou mais elementos que estão dentro de outro, ou seja, que são descendentes do elemento principal. Exemplo: p strong. Com isso, selecionamos apenas tags strong que estão dentro de parágrafos. Podemos selecionar com ainda mais especificidade, escrevendo mais elementos, como: div p strong a. Neste exemplo, selecionamos links que estão dentro de tags strong que estão dentro de parágrafos que estão dentro de tags div. Seletor de classe: Seleciona elementos com uma classe específica aplicada. Exemplo:.destaque seleciona todos os elementos com a classe destaque. Seletor de id: Seleciona o elemento com a id especificada. Exemplo: #cabecalho irá selecionar o elemento com a id cabecalho. Cada id é única e não pode ser repetida no mesmo documento. > Seletor filho: Seleciona o elemento filho. No nosso exemplo (linha 10), estiliza o elemento h1 filho de hgroup. Seletor irmão adjacente: No nosso exemplo (linha 19), estliiza o elemento h2 irmão adjacente de h1. COMBINANDO SELETORES Podemos também combinar os seletores que aprendemos acima, para conseguir diferentes elementos e partes mais específicas de nossos sites. Alguns exemplos: p.destaque seleciona apenas os parágrafos que possuem a classe destaque. div#cabecalho h1 seleciona tags h1 que estejam dentro da div com a id cabecalho. #conteudo ul li a seleciona links (tag a) dentro de itens de lista dentro de tags ul que estejam dentro de um elemento com a id conteudo.

44 #conteudo p.destaque strong seleciona elementos strong dentro de parágrafos com a classe destaque que estejam dentro de um elemento com a id conteudo..mensagem.destaque seleciona apenas elementos que tenham a classe mensagem e a classe destaque. Separando itens por vírgulas, como p.destaque, h1, a.saiba-mais seleciona todos os respectivos elementos para as regras. Muito útil para diminuir a repetição de regras no arquivo CSS. Linha 28 do exemplo: Seletor composto. Estiliza o elemento a filho do primeiro elemento li que é filho de ul que por sua vez é filho de nav. Linha 40 do exemplo: Seletor composto. Essa regra estiliza o terceiro elemento li filho do elemento ul que por sua vez é filho de nav. PSEUDO-CLASSES Pseudo-classes são tipos de classes especiais que não são definidas pelo desenvolvedor (já são prédefinidas). A sua maior utilização é com links (tags a) para definir estilos diversos para quando o link é novo, visitado, etc. O seletor de pseudo-classe é escrito com o nome do elemento + dois pontos + nome da pseudo-classe. Para começar, vamos nos familiarizar com as pseudo-classes de links: Com o seletor a:link, estilizamos apenas os links não-visitados, ou seja, links no seu estado normal. Com o seletor a:visited, estilizamos apenas links visitados, ou seja, que já foram clicados. Com o seletor a:hover, estilizamos links quando o mouse está em cima do mesmo. Com esta pseudo-classe podemos fazer diversos efeitos interessantes. Esta pseudo-classe pode ser aplicada a qualquer elemento, não apenas links, o que a torna ainda mais útil. Com o seletor a:focus, estilizamos links quando os selecionamos com o teclado, através da tecla Tab. Esta pseudo-classe é útil para estilizar links para pessoas que possuem habilidade limitada e não conseguem utilizar o mouse, por exemplo. Com o seletor a:active, estilizamos um link quando o mouse está sendo clicado ou pressionamos Enter, ativando o link. CASCATA (E HERANÇA) A cascata é outra das características importantes das CSS. Tão importante, que está até no nome: Cascading Style Sheets. O que Cascading quer dizer é que a maioria das propriedades que aplicamos a um elemento, irá passar aos seus herdeiros, ou seja, os elementos que estão contidos naquele. Vejamos um exemplo: 1  2 <div class="texto"> 3 <p> 4 Texto exemplo <strong>com um destaque</strong>. 5 </p> 6 </div>

45 1 /* CSS */ 2.texto { 3 color: #F00; 4 } Perceba que, apesar da propriedade color ter sido aplicada à div texto, esta propriedade passou para o parágrafo e para o destaque também. Isto parece óbvio neste exemplo, mas é importante se familiarizar com este conceito. Uma utilização comum da cascata é definir uma fonte para a página inteira. Exemplo: 1 body { 2 font-family: Arial, sans-serif; 3 } Com esta regra, todos os elementos que estão dentro de body (ou seja, todo o conteúdo do site) irá usar a fonte Arial ou, se não estiver disponível, a fonte sans-serif padrão do sistema operacional. ESPECIFICIDADE E PRECEDÊNCIA As CSS também obedecem algumas regras de precedência. Quando várias regras se aplicam a um mesmo elemento, o navegador precisa decidir qual delas tem precedência. Vamos criar uma div: 1 <div id="sidebar"> 2 <p class="descricao"> 3 Texto exemplo. 4 </p> 5 </div> Vamos supor que temos duas regras aplicadas à div: 1 #sidebar { 2 color: #F00; 3 } 4 5 div#sidebar p { 6 color: #F0F; 7 } Qual delas será aplicada? Se você pensou a mais específica, acertou. O seletor div.sidebar p tem precedência. Por que ele é mais específico? Para termos uma ideia melhor de especificidade, há algumas regras gerais: Regras em tags style tem precedência sobre regras em arquivos externos CSS; Regras em linha (atributo style) tem precedência sobre regras em tags style ou arquivos externos CSS; Seletores de elemento (por exemplo, p) tem a menor precedência (podemos dizer que, numa escala, este tipo de seletor vale 1 ); Seletores de classe (por exemplo,.destaque) tem mais precedência (vale 10 ); Seletores de id (por exemplo, #conteudo) tem maior precedência (vale 100 ). Tendo isto, se há duas regras (usando a mesma estrutura anterior): 1 div p.descricao {} 2 #sidebar p {}

46 O segundo seletor tem precedência (apesar de não parecer inicialmente) pois o seletor de id tem muito mais peso e isso o torna mais específico para o navegador na hora de renderizar a página. Se utilizarmos a nossa escala, veremos que o primeiro seletor, div p.descricao, vale 12 (dois seletores de elemento, mais um de classe); enquanto o segundo seletor vale 101 (um seletor de id mais um seletor de elemento). Figura 14: Tabela de Seletores

47 2.9 Flutuando elementos (floats) Apostila de Desenvolvimento de Aplicações Web Um elemento pode ser flutuado à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container). A figura 15 a seguir ilustra o princípio de float: Figura 15: Princípio de funcionamento da propriedade float Se desejamos que um texto seja posicionado em volta de uma imagem como mostrado na figura 16, basta flutuarmos a imagem: Figura 16: Princípio de funcionamento da propriedade float Como isto é feito? O HTML para o exemplo acima é mostrado a seguir: 1 <div id="picture"> 2 <img src="bill.jpg" alt="bill Gates"> 3 </div> 4 5 <p>causas naturales et antecedentes, 6 idciro etiam nostrarum voluntatum...</p> Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e declarar para ele float: left; 1 #picture { 2 float:left; 3 width: 100px; 4 } Outro exemplo : colunas Floats podem ser usados para construir colunas em um documento. Para criá-las, estruturamos no código HTML usando <div> como mostrado a seguir:

48 1 <div id="column1"> 2 <p>haec disserens qua de re agatur 3 et in quo causa consistat non videt...</p> 4 </div> 5 6 <div id="column2"> 7 <p>causas naturales et antecedentes, 8 idciro etiam nostrarum voluntatum...</p> 9 </div> <div id="column3"> 12 <p>nam nihil esset in nostra 13 potestate si res ita se haberet...</p> 14 </div> A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada uma das colunas: 1 #column1 { 2 float:left; 3 width: 33%; 4 } 5 6 #column2 { 7 float:left; 8 width: 33%; 9 } #column3 { 12 float:left; 13 width: 33%; 14 } float pode ser declarado left, right ou none A propriedade clear A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates. A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código. 1 <div id="picture"> 2 <img src="bill.jpg" alt="bill Gates"> 3 </div> 4 5 <h1>bill Gates</h1> 6 7 <p class="floatstop">causas naturales et antecedentes, 8 idciro etiam nostrarum voluntatum...</p> Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS: 1 #picture { 2 float:left; 3 width: 100px; 4 }

49 5 6.floatstop { 7 clear:both; 8 } 2.10 Posicionando elementos Com posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats, o posicionamento abre muitas possibilidades para criação de layouts precisos e avançados O princípio de posicionamento CSS Considere a janela do navegador como um sistema de coordenadas: Figura 17: Janela do navegador O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas Posicionamento absoluto Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que não deixa nenhum espaço vazio após ser posicionado. Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento. Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página: 1 #box1 { 2 position:absolute; 3 top: 50px; 4 left: 50px; 5 } 6 7 #box2 { 8 position:absolute; 9 top: 50px; 10 right: 50px; 11 } 12

50 13 #box3 { 14 position:absolute; 15 bottom: 50px; 16 right: 50px; 17 } #box4 { 20 position:absolute; 21 bottom: 50px; 22 left: 50px; 23 } Posicionamento relativo Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado. O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado. Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>posicionamento com CSS</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="posicaorelativa.css" type="text/css"> 7 </head> 8 9 <body> 10 <div id="dog1"> 11 <img src="pluto_1.png" /> 12 </div> 13 <div id="dog2"> 14 <img src="pluto_1.png" /> 15 </div> 16 <div id="dog3"> 17 <img src="pluto_1.png" /> 18 </div> 19 </body> 20 </html> 1 #dog1 { 2 position:relative; 3 left: 50px; 4 top: 0; 5 } 6 #dog2 { 7 position:relative; 8 left: 350px; 9 top: 0; 10 } 11 #dog3 { 12 position:relative; 13 left: 50px; 14 top: 0;

51 15 } Figura 18: Exemplo posicionamento relativo

52 3 Construindo um exemplo Apostila de Desenvolvimento de Aplicações Web Para aplicarmos o que foi aprendido até o momento, nosso objetivo será criar um site, conforme a figura 19 abaixo: Figura 19: Página de exemplo Como ainda não aprendemos javascript e os conceitos de AJAX, criaremos um arquivo para cada opção do nosso menu: Página Principal = index.html Sobre = sobre.html Contato = contato.html Estilização = layout.css A arvore de diretórios para o nosso site, ficará conforme figura 20:

53 Figura 20: Diretórios do site de exemplo 3.1 Arquivo: index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>cefetmg - Aplicações WEB</title> 5 <meta charset="utf-8"> 6  7 <link rel="stylesheet" type="text/css" href="css/layout.css"> 8 </head> 9 <body> 10 <div class="container"> 11  12 <div class="menu"> 13 <ul class="menu-top"> 14 <li><a href="#">início</a></li> 15 <li><a href="sobre.html">sobre</a></li> 16 <li><a href="contato.html">contato</a></li> 17 </ul> 18 </div> 19  20 <div class="main"> 21  22 <div class="box-left"> 23 <img src="img/logo1.jpg" /> 24 </div> 25 <div class="box-right"> 26 <img src="img/logo2.jpg" /> 27 </div> 28 <div class="box-text1"> 29 <p> 30 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 31 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 32 minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 33 aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 34 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 35 facilisis at vero eros et accumsan et iusto...

54 36 </p> 37  38 <a href="#" id="leia">leia mais...</a> 39 </div> 40 <div class="box-text2"> 41 <p> 42 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 43 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 44 minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 45 aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 46 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 47 facilisis at vero eros et accumsan et iusto </p> 49  50 <a href="#" id="leia">leia mais...</a> 51 </div> 52 </div> 53  54 <div class="footer"> 55 <div class="footer-box"> 56 <ul > 57 <li><h4>menu</h4></li> 58 <li><a href="#">início</a></li> 59 <li><a href="#">sobre</a></li> 60 <li><a href="#">contato</a></li> 61 </ul> 62 </div> 63 <div class="footer-box"> 64 <ul > 65 <li><h4>quem SOMOS</h4></li> 66 <li><a href="#">onde estamos</a></li> 67 <li><a href="#">parceiros</a></li> 68 <li><a href="#">trabalhe conosco</a></li> 69 </ul> 70 </div> 71 <div class="footer-box"> 72 <ul > 73 <li><h4>redes SOCIAIS</h4></li> 74 <li><a href="#">twitter</a></li> 75 <li><a href="#">facebook</a></li> 76 <li><a href="#">youtube</a></li> 77 </ul> 78 </div> 79 <div class="copyright"> 80 <h5>cefetmg - Aplicações WEB Copyright Todos os direitos reservados</h5> 81 </div> 82 </div> 83 </div> </body> 86 </html>

55 3.2 Arquivo: sobre.html Apostila de Desenvolvimento de Aplicações Web 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>cefetmg - Aplicações WEB</title> 5 <meta charset="utf-8"> 6  7 <link rel="stylesheet" type="text/css" href="css/layout.css"> 8 </head> 9 <body> 10 <div class="container"> 11  12 <div class="menu"> 13 <ul class="menu-top"> 14 <li><a href="index.html">início</a></li> 15 <li><a href="#">sobre</a></li> 16 <li><a href="contato.html">contato</a></li> 17 </ul> 18 </div> 19  20 <div class="main"> 21 <div class="sobre"> 22 <h2>sobre NÓS</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 25 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 26 minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 27 aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 28 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 29 facilisis at vero eros et accumsan et iusto. </p> 30 <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 31 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 32 minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 33 aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 34 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 35 facilisis at vero eros et accumsan et iusto. </p> 36 <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 37 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 38 minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 39 aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 40 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 41 facilisis at vero eros et accumsan et iusto. </p> 42 </div> 43  44 <div class="footer">

56 45 <div class="footer-box"> 46 <ul > 47 <li><h4>menu</h4></li> 48 <li><a href="#">início</a></li> 49 <li><a href="#">sobre</a></li> 50 <li><a href="#">contato</a></li> 51 </ul> 52 </div> 53 <div class="footer-box"> 54 <ul > 55 <li><h4>quem SOMOS</h4></li> 56 <li><a href="#">onde estamos</a></li> 57 <li><a href="#">parceiros</a></li> 58 <li><a href="#">trabalhe conosco</a></li> 59 </ul> 60 </div> 61 <div class="footer-box"> 62 <ul > 63 <li><h4>redes SOCIAIS</h4></li> 64 <li><a href="#">twitter</a></li> 65 <li><a href="#">facebook</a></li> 66 <li><a href="#">youtube</a></li> 67 </ul> 68 </div> 69 <div class="copyright"> 70 <h5>cefetmg - Aplicações WEB Copyright Todos os direitos reservados</h5> 71 </div> 72 </div> 73 </div> </body> 76 </html>

57 3.3 Arquivo: contato.html Apostila de Desenvolvimento de Aplicações Web 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>cefetmg - Aplicações WEB</title> 5 <meta charset="utf-8"> 6  7 <link rel="stylesheet" type="text/css" href="css/layout.css"> 8 </head> 9 <body> 10 <div class="container"> 11  12 <div class="menu"> 13 <ul class="menu-top"> 14 <li><a href="index.html">início</a></li> 15 <li><a href="sobre.html">sobre</a></li> 16 <li><a href="#">contato</a></li> 17 </ul> 18 </div> 19  20 <div class="main"> 21 <div class="contato"> 22 <h2>contato</h2> 23 <hr > <form> 26 <label for="nome">*nome:</label><br> 27 <input type="text" name="nome" /><br> <label for=" ">* </label><br> 30 <input type="text" name=" " /><br> <label for="assunto">assunto:</label><br> 33 <input type="text" name="assunto" /><br> <label for="msg">mensagem:</label><br> 36 <textarea name="msg" cols="35" rows="4" id="msg"></textarea><br> <input type="submit" name="enviar" value="enviar Mensagem" id=" enviar"><br> 39 </form> <div class="contact"> 42 <h2>telefone:</h2> 43 <h4>(099) </h4> <h2>onde Estamos:</h2> 46 <h4>avn. das Acácias, 22</h4> <h2>cidade/estado</h2> 49 <h4>algum lugar, Estado, Brasil</h4> 50 </div> <div class="campo"> 53 <hr > 54 <i>os campos com * são obrigatórios</i> 55 </div> 56 </div> 57 </div> 58

58 59 <div class="footer"> 60 <div class="footer-box"> 61 <ul > 62 <li><h4>menu</h4></li> 63 <li><a href="#">início</a></li> 64 <li><a href="#">sobre</a></li> 65 <li><a href="#">contato</a></li> 66 </ul> 67 </div> 68 <div class="footer-box"> 69 <ul > 70 <li><h4>quem SOMOS</h4></li> 71 <li><a href="#">onde estamos</a></li> 72 <li><a href="#">parceiros</a></li> 73 <li><a href="#">trabalhe conosco</a></li> 74 </ul> 75 </div> 76 <div class="footer-box"> 77 <ul > 78 <li><h4>redes SOCIAIS</h4></li> 79 <li><a href="#">twitter</a></li> 80 <li><a href="#">facebook</a></li> 81 <li><a href="#">youtube</a></li> 82 </ul> 83 </div> 84 <div class="copyright"> 85 <h5>cefetmg - Aplicações WEB Copyright Todos os direitos reservados</h5> 86 </div> 87 </div> 88 </div> </body> 91 </html>

59 3.4 Arquivo: layout.css Apostila de Desenvolvimento de Aplicações Web 1 body{ 2 background: #E5E5E5; 3 margin: 0; 4 padding: 0; 5 font-family: Tahoma, arial, verdana; 6 font-size: 13px; 7 color: #000; 8 } 9 10 a{ 11 text-decoration: none; 12 color: #000; 13 } ul{ 16 list-style: none; 17 margin: 0; 18 padding: 0; 19 } container{ 22 margin: 0 auto; 23 width: 750px; 24 height: auto; 25 } /* Menu */ 28.menu{ 29 background: #ccc; 30 width: 751px; 31 height: 35px; 32 margin: 70px 0 0 0; 33 padding: 0; box-shadow: 1px 1px 3px #888888; 36 -moz-box-shadow: 1px 1px 3px #888888; 37 -webkit-box-shadow: 1px 1px 3px #888888; 38 border-radius: 2px; 39 text-shadow: 0px 2px 3px #666; 40 } menu li{ display: inline; } menu-top li a{ 45 width: 50px; 46 height: 15px; 47 padding: 8px 40px; 48 float: left; 49 /*text-shadow: 0px 2px 3px #666; */ 50 } 51.menu-top li a:hover{ 52 background: #393939; 53 color: #fff; 54 border-bottom: solid 4px #FF8C00; 55 border-radius: 2px; 56 text-shadow: 1px 0px 1px #fff; 57 } /* Main */

60 60.main{ 61 width: 750px; 62 height: auto; 63 float: left; 64 margin: 15px 0 15px 0; 65 } main.box-left{ 68 width: 350px; 69 height: 190px; 70 float: left; 71 background: #FFFFF0; 72 } main.box-right{ 75 width: 350px; 76 height: 190px; 77 float: right; 78 margin-right: 15px; 79 background: #FFFFF0; 80 } main.box-text1{ 83 width: 335px; 84 height: 170px; 85 margin-top: 18px; 86 float: left; 87 background: #FFFFF0; 88 padding: 15px; 89 text-align: justify; 90 } main.box-text2{ 93 width: 335px; 94 height: 170px; 95 margin-top: 18px; 96 float: right; 97 background: #FFFFF0; 98 padding: 15px; 99 text-align: justify; 100 } #leia{ 103 width: 70px; 104 height: auto; 105 padding: 3px 20px; 106 background: #222222; 107 color: #FFF; 108 border-bottom: solid 3px #FF8C00; 109 border-top: 0px; 110 border-left: 0px; 111 border-right: 0px; 112 font-weight: normal; 113 float: left; 114 cursor: pointer; 115 } #leia:hover{ text-shadow: 0px 2px 3px #666; } /* FOOTER */ 120

61 121. footer{ 122 width: 750px; 123 height: 160px; 124 float: left; 125 background: #393939; 126 color: #FFFFE0; 127 margin-bottom: 15px; 128 } footer-box{ 131 width: 245px; 132 height: 130px; 133 float: left; 134 } footer-box ul{ margin-left: 50px; } footer-box li a{ color: #fff; } footer-box li a:hover{ 141 color: #fff; 142 background: #1C1C1C; 143 border-bottom: solid 2px #FF8C00; 144 padding: 0px 5px; 145 } footer-box h4{ 148 text-shadow: 1px 0px 1px #1C1C1C; 149 font-style: inherit; 150 } footer.copyright{ 153 width: 100%; 154 height: 30px; 155 float: left; 156 background: #1C1C1C; 157 text-align: center; 158 border-top: solid 2px #FF8C00; 159 } footer.copyright h5{ margin-top: 8px; } /* PAGINA SOBRE */ sobre{ 166 width: 720px; 167 height: auto: 168 float: left; 169 padding: 15px; 170 background: #FFFFFF; 171 text-align: justify; 172 margin-bottom: 15px; 173 } /* Contato */ contato{ 178 width: 720px; 179 height: auto; 180 float: left; 181 padding: 15px;

62 182 background: #FFFFFF; 183 } 184 input{ 185 width: 302px; 186 height: 20px; 187 color: #393939; 188 font-size: 14px; 189 font-weight: bold; 190 } label{ 193 width: 250px; 194 height: 20px: 195 color: #222222; 196 font-size: 14px; 197 font-weight: bold; 198 } textarea{ width: 302px; } form{ 203 width: 350px; 204 height: auto; 205 float: left; 206 } contact{ 209 width: 350px; 210 height: 255px; 211 float: right; 212 color: #222222; 213 } campo{ 216 width: 100%; 217 float: left; 218 margin-top: 10px; 219 color: #222222; 220 } # enviar{ 223 width: 150px; 224 height: auto; 225 padding: 3px 20px; 226 background: #222222; 227 color: #FFF; 228 border-bottom: solid 3px #FF8C00; 229 border-top: 0px; 230 border-left: 0px; 231 border-right: 0px; 232 font-weight: normal; 233 float: left; 234 margin: 10px px; 235 cursor: pointer; 236 }

63 4 Javascript Apostila de Desenvolvimento de Aplicações Web Para rodar JavaScript em uma página Web, precisamos ter em mente que a execução do código é instantânea. Para inserirmos um código JavaScript em uma página, é necessário utilizar a tag <script> : 1 <script> 2 alert("hello World!"); 3 </script> O exemplo acima é um hello world em JavaScript utilizando uma função do navegador, a função alert. É possível adicionar essa tag em qualquer local do documento que a sua renderização ficará suspensa até o término dessa execução. Experimente criando essa tag em um HTML e reposicionando-a, verifique os elementos que já foram renderizados na página antes do aparecimento da caixa de diálogo e o que acontece após clicar em OK. Também é possível executar código que está em um arquivo externo, por exemplo: No arquivo HTML 1 <script src="scripts/hello.js"></script> Arquivo externo script/hello.js 1 alert("hello World!"); Com a separação do script em arquivo externo é possível reaproveitar alguma funcionalidade em mais de uma página. 4.1 Variáveis Para armazenarmos um valor para uso posterior, podemos criar uma variável: 1 var curso = "WD-43"; 2 3 alert(curso); No exemplo acima, guardamos o valor WD-43 na variável curso. A partir desse ponto, é possível utilizar a variável para obter o valor que guardamos nela. No JavaScript, também é possível alterar o valor da variável a qualquer momento, inclusive por valores de tipos diferentes (por exemplo, um número) sem problemas, coisa que não é possível de se fazer em algumas outras linguagens de programação. 4.2 Tipos O JavaScript dá suporte aos tipos String (letras e palavras), Number (números inteiros, decimais), Boolean (verdadeiro ou falso) entre outros. 1 var texto = "Uma String deve ser envolvida em aspas simples ou duplas."; 2 var numero = 2012; 3 var verdade = true; Outro tipo de informação que é considerado um tipo no JavaScript é o Array, onde podemos armazenar uma série de informações de tipos diferentes: 1 var pessoas = ["Izabelita", "Sabrina", "Willl", "Lucas"];

64 4.3 Iteração Apostila de Desenvolvimento de Aplicações Web Quando utilizamos o JavaScript para interagir com os elementos da página é muito comum obtermos cole- ções. Para fazer alguma coisa com cada elemento de uma coleção é necessário efetuar uma iteração. A mais comum é utilizando o for: 1 var pessoas = ["Izabelita", "Sabrina", "Willl", "Lucas"]; 2 3 for (var i = 0; i < pessoas.length; i++) { 4 alert(pessoas[i]); 5 } 4.4 Interatividade na Web Observe o exemplo a seguir: 1 var titulo = document.queryselector("#titulo"); 2 3 titulo.textcontent = "Agora o texto do elemento mudou!"; No exemplo anterior, nós selecionamos um elemento do documento e alteramos sua propriedade textcontent. Existem diversas maneiras de selecionarmos elementos de um documento e de alterarmos suas propriedades. Inclusive é possível selecionar elementos de maneira similar ao CSS, através de seletores CSS: 1 var painelnovidades = document.queryselector(".painel #novidades"); 2 3 painelnovidades.style.color = "red"; queryselector vs queryselectorall A função queryselector sempre retorna um elemento, mesmo que o seletor potencialmente traga mais de um elemento, neste caso, apenas o primeiro elemento será retornado. A função queryselectorall retorna uma lista de elementos compatíveis com o seletor CSS passado como argumento. Sendo assim, para acessarmos cada elemento retornado, precisaremos passar o seu índice conforme o exemplo abaixo: 1 var paragrafos = document.queryselectorall("div p"); 2 paragrafos[0].textcontent = "Primeiro paragrafo da selecao"; 3 paragrafos[1].textcontent = "Segundo paragrafo da selecao"; Apesar de ser interessante a possibilidade de alterar o documento todo por meio do JavaScript, existe um problema com a característica de execução imediata do código. O mais comum é que as alterações sejam feitas quando o usuário executa alguma ação, como por exemplo, clicar em um elemento. Para suprir essa necessidade, é necessário utilizar de dois recursos do JavaScript no navegador. O primeiro é a criação de funções: 1 function mostraalerta() { 2 alert("funciona!"); 3 } Ao criarmos uma função, a execução do código simplesmente guarda o que estiver dentro da função, e esse código guardado só será executado quando chamarmos a função. Para exemplificar a necessidade citada acima, vamos utilizar o segundo recurso, os eventos: 1 <!DOCTYPE HTML> 2 <html lang="pt-br"> 3 <head> 4 <title>testando JavaScript</title>

65 5 <meta charset="utf-8"> 6 <script language="javascript"> 7 function mostraalerta(){ 8 alert("funciona!"); 9 } 10 </ script > 11 </head> 12 <body> 13 <div class="topo"> 14 <P>Clique aqui para testar o javascript</p> 15 <input type="button" name="enviar" value="testar" onclick=" mostraalerta()"> 16 </div> 17 </body> 18 </html> Também podemos executar uma função, através de uma chamada executada em outra função. Observe o exemplo: 1 <!DOCTYPE HTML> 2 <html lang="pt-br"> 3 <head> 4 <title>testando JavaScript</title> 5 <meta charset="utf-8"> 6 <script language="javascript"> 7 function mostraalerta(){ 8 alert("funciona!"); 9 } 10 function executar(){ 11 var botao = document.queryselector("#enviar"); 12 botao.onclick = mostraalerta; 13 } 14 </ script > 15 </head> 16 <body> 17 <div class="topo"> 18 <span hidden="hidden">executar()</span> 19 <P>Clique aqui para testar o javascript</p> 20 <input type="button" name="enviar" value="testar" onclick=" mostraalerta()"> 21 </div> 22 </body> 23 </html> Também é possível determinar, por meio de seus argumentos, que a função vai ter algum valor variável que vamos definir quando quisermos executá-la: 1 <!DOCTYPE HTML> 2 <html lang="pt-br"> 3 <head> 4 <title>testando JavaScript</title> 5 <meta charset="utf-8"> 6 <script language="javascript"> 7 function mostraalerta(texto){ 8 alert(texto); 9 } 10 </ script > 11 </head> 12 <body> 13 <div class="topo"> 14 <P>Clique aqui para testar o javascript</p> 15 <input type="button" name="enviar" value="testar" onclick=" mostraalerta( Funciona com argumento!! )">

66 16  17 </div> 18 </body> 19 </html> Existem diversos eventos que podem ser utilizados para que a interação do usuário com a página seja o ponto de disparo de funções que alteram os elementos da própria página: onclick: clica com o mouse ondblclick: clica duas vezes com o mouse onmousemove: mexe o mouse onmousedown: aperta o botão do mouse onmouseup: solta o botão do mouse (útil com os dois acima para gerenciar drag?n?drop) onkeypress: ao pressionar e soltar uma tecla onkeydown: ao pressionar uma tecla. onkeyup: ao soltar uma tecla. Mesmo acima. onblur: quando um elemento perde foco onfocus: quando um elemento ganha foco onchange: quando um input, select ou textarea tem seu valor alterado onload: quando a página é carregada onunload: quando a página é fechada onsubmit: disparado antes de submeter o formulário. Útil para realizar validações Existem também uma série de outros eventos mais avançados que permitem a criação de interações para drag-and-drop, e até mesmo a criação de eventos customizados. 4.5 Validação na busca com JavaScript Vamos criar um formulário e utilizar o Google como mecanismo de busca, apenas como ilustração. Para isso, crie o arquivo html conforme abaixo: 1 <!DOCTYPE HTML> 2 <html lang="pt-br"> 3 <head> 4 <title>testando JavaScript</title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <div class="container"> 9 <P>Informe o texto para realizar a busca:</p> 10 <form action=" id="form-busca"> 11 <input type="search" name="q" id="q"> 12 <input type="submit" name="enviar" value="pesquisar"> 13 </div> 14 </body> 15 </html>

67 Repare que colocamos também um id. Ele será útil para depois manipularmos esse elemento via JavaScript. Além disso, o <input> com o texto a ser buscado deve ter o nome de q para ser compatível com o Google. Teste a página e submeta uma busca simples para o Google com o nosso formulário. Vamos agora fazer uma validação, para verificar se o valor foi preenchido, quando o usuário clicar em submeter. Caso contrário nosso site irá mostrar uma mensagem de erro em um alert. A validação será escrita em JavaScript. Assim, crie um arquivo pesquisa.js na pasta do projeto. Referencie esse arquivo no seu html usando a tag <script> no final da página, logo antes de fechar o </body>: 1 <script src="pesquisa.js"></script> A validação em si será feita por uma função JavaScript a ser acionada no momento que o usuário tentar submeter o formulário. A função deve ser definida dentro do arquivo pesquisa.js criado antes. Seu papel é verificar se o elemento com id=q (o campo de busca) está vazio. Se estiver, mostramos um alert e abortamos a submissão do formulário com return false: 1 function validabusca(){ 2 if (document.queryselector( #q ).value == ){ 3 alert( Nao podia ter deixado em branco!!! ); 4 return false; 5 } 6 } 7 //fazendo a associacao da funcao com o evento 8 document.queryselector( #form-busca ).onsubmit = validabusca; Desta forma verificamos se o <input type= text > está vazio, deixando que o navegador chame a função quando acontecer o evento onsubmit. Se ao invés de enviar um alerta de erro você desejar, por exemplo, chamar a atenção modificando a cor do formulário, o código da função deverá ser ajustado assim: 1 function validabusca(){ 2 if (document.queryselector( #q ).value == ){ 3 document.queryselector( #form-busca ).style.background = red ; 4 return false; 5 } 6 } 7 //fazendo a associação da função com o evento 8 document.queryselector( #form-busca ).onsubmit = validabusca; No exemplo anterior criamos uma função JavaScript com nome validabusca e a referenciamos no onsubmit do formulário. Mas repare que o único uso dessa função é nessa situação. Nesses casos, podemos usar um recurso do JavaScript chamado de funções anônimas que nos permite definir a função diretamente na definição do onsubmit. Veja como fica nosso exemplo: 1 document.queryselector( #form-busca ).onsubmit = function() { 2 if (document.queryselector( #q ).value == ) { 3 document.queryselector( #form-busca ).style.background = red ; 4 return false; 5 } 6 };

68 4.6 Funções temporais Apostila de Desenvolvimento de Aplicações Web Em JavaScript, podemos criar um timer para executar um trecho de código após um certo tempo, ou ainda executar algo de tempos em tempos. A função settimeout permite que agendemos alguma função para execução no futuro e recebe o nome da função a ser executada e o número de milissegundos a esperar: 1 // executa a minhafuncao daqui um segundo 2 settimeout(minhafuncao, 1000); Se for um código recorrente, podemos usar o setinterval que recebe os mesmos argumentos mas executa a função indefinidamente de tempos em tempos: 1 // executa a minhafuncao de um em um segundo 2 setinterval(minhafuncao, 1000); uma função útil para, por exemplo, implementar um banner rotativo. clearinterval As funções temporais devolvem um objeto que representa o agendamento que foi feito. É possível usá-lo para cancelar a execução no futuro. É especialmente interessante para o caso do interval que pode ser cancelado de sua execução infinita: 1 // agenda uma execucao qualquer 2 var timer = setinterval(minhafuncao, 1000); 3 // cancela execucao 4 clearinterval(timer); Exemplo: Banner rotativo Temos duas imagens, a imagem1.jpg e a imagem2.jpg que queremos trocar a cada 3 segundos. Há várias formas de implementar essa troca de imagens. Uma sugestão é manter um array com os valores possíveis para a imagem e um inteiro que guarda qual é o banner atual. 1 <!DOCTYPE HTML> 2 <html lang="pt-br"> 3 <head> 4 <title>testando JavaScript</title> 5 <meta charset="utf-8"> 6 <style rel="stylesheet" type="text/css" media="all"> 7.Topo img{ 8 max-width: 700px; 9 max-height: 230px; 10 width: auto; 11 height: auto; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="topo"> 17 <img src="imagem1.jpg"> 18 </div> 19 <script language="javascript"> 20 var banners = ["imagem1.jpg", "imagem2.jpg"]; 21 var banneratual = 0; 22 function trocabanner() { 23 banneratual = (banneratual + 1) % 2; 24 document.queryselector(.topo img ).src = banners[banneratual]; 25 }

69 26 setinterval(trocabanner, 3000); 27 </ script > 28 </body> 29 </html> Desafio 1 1. Faça um botão de pause que pare a troca do banner. Dica: use o clearinterval para interromper a execução. 2. Faça um botão de play para reativar a troca dos banners Proposta de solução para o desafio 1 1 <!DOCTYPE HTML> 2 <html lang="pt-br"> 3 <head> 4 <title>testando JavaScript</title> 5 <meta charset="utf-8"> 6 <style rel="stylesheet" type="text/css" media="all"> 7.Topo img{ 8 float: left; 9 max-width: 700px; 10 max-height: 230px; 11 width: auto; 12 height: auto; 13 } 14.pause,.play { 15 display: block; 16 float: left; 17 } 18.pause { 19 border-left: 10px solid #900; 20 border-right: 10px solid #900; 21 height: 30px; 22 width: 5px; 23 } 24.play { 25 border-left: 25px solid #900; 26 border-bottom: 15px solid transparent; 27 border-top: 15px solid transparent; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="topo"> 33 <img src="imagem1.jpg"> 34 <a href="#" class="pause"></a> 35 </div> 36 <script language="javascript"> 37 var banners = ["imagem1.jpg", "imagem2.jpg"]; 38 var banneratual = 0; 39 function trocabanner() { 40 banneratual = (banneratual + 1) % 2; 41 document.queryselector(.topo img ).src = banners[banneratual]; 42 } var timer = setinterval(trocabanner, 3000); 45 var controle = document.queryselector(.pause ); 46 controle.onclick = function() {

70 47 if (controle.classname == pause ) { 48 clearinterval(timer); 49 controle.classname = play ; 50 } else { 51 timer = setinterval(trocabanner, 3000); 52 controle.classname = pause ; 53 } 54 return false; 55 }; 56 </ script > 57 </body> 58 </html> Desafio 2 Faça um script que receba uma data no formato dd/mm/aaaa e escreva a data por extenso. Exemplo: Para a entrada 04/03/2016 deve ser escrito 04 de março de Proposta de solução para o desafio 1 1 <!DOCTYPE HTML> 2 <html lang="pt-br"> 3 <head> 4 <title>desafio</title> 5 <meta charset="utf-8"> 6 <script> 7 function verificar(){ 8 data = document.queryselector(.datainfo ).value; 9 //data = window.document.formul.datainformada.value; dt = data.split( / ); 12 dia = dt[0]; 13 mes = dt[1]; 14 ano = dt[2]; 15 mes = parseint(mes); 16 mesextenso = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", " julho", "agosto", "setembro", "outubro", "novembro", "dezembro"]; 17 mesext = mesextenso[mes-1]; document.queryselector( #resultado ).innerhtml = dia + " de "+mesext+" de "+ano; 20 //document.getelementbyid("resultado").innerhtml = dia + " de "+mesextenso +" de "+ano; 21 } 22 </ script > 23 </head> 24 <body> 25 <h1>data por extenso</h1></br> 26 <hr > 27 <form name=formul> 28 <table border=0> 29 <tr > 30 <td><label for="data">data:</label></td> 31 </tr> 32 <tr > 33 <td><input type="text" name="datainformada" class="datainfo"/></ td> 34 <td><input type=button value=verificar onclick="verificar()"></ td> 35 </tr> 36 </table>

71 37 </form> 38 <hr > 39 <h3><span id="resultado"></span></h3> 40 </body> 41 </html>

72 4.7 jquery Apostila de Desenvolvimento de Aplicações Web O jquery é uma grande biblioteca que contém diversas funções que facilitam a vida do programador. A mais importante delas, que inicia a maioria dos códigos, é a função $. Com ela é possível selecionar elementos com maior facilidade, maior compatibilidade, e com menos código. Por exemplo: 1 // JavaScript "puro" 2 var cabecalho = document.getelementbyid("cabecalho"); 3 4 if (cabecalho.attachevent) { 5 cabecalho.attachevent("onclick", function (event) { 6 alert("você clicou no cabeçalho, usuário do IE!"); 7 }); 8 } else if (cabecalho.addeventlistener) { 9 cabecalho.addeventlistener("click", function (event) { 10 alert("você clicou no cabeçalho!") 11 }, false); 12 } // jquery 15 $("#cabecalho").click(function (event) { 16 alert("você clicou no cabeçalho!"); 17 }); Note como a sintaxe do jquery é bem menor, e a biblioteca se encarrega de encontrar o modo mais compatível possível para adicionar o evento ao elemento cujo id é cabecalho. Existem diversas funções que o jquery permite que utilizemos para alterar os elementos que selecionamos pela função $, e essas funções podem ser encadeadas, por exemplo: 1 $("#cabecalho").css({"margin-top": "20px", "color": "#333333"}) 2.addClass("selecionado"); No código acima, primeiramente chamamos a função $ e passamos como argumento uma String idêntica ao seletor CSS que utilizaríamos para selecionar o elemento de id cabecalho. Na sequência chamamos a função css e passamos um objeto como argumento, essa função adicionará ou alterará as informações desse objeto como propriedades de estilo do elemento que selecionamos com a função $. Em seguida chamamos mais uma função, a addclass, que vai adicionar o valor selecionado ao atributo class do elemento com o id cabecalho. Dessa maneira, é possível fazer muito mais com muito menos código, e ainda por cima de uma maneira que funciona em diversos navegadores Características de execução Para utilizarmos o jquery em nossos projetos com maior segurança, devemos tomar alguns cuidados. Importação Antes de mais nada é necessário incluir o jquery em nossa página. Só assim o navegador executará seu código para que possamos utilizar suas funcionalidades em nosso código. Por isso é necessário que a tag <script> do jquery seja a primeira de todas na ordem de nosso documento:

73 1 <script src="scripts/jquery.js"></script> 2  3 <script src="scripts/meuscript.js"></script> 4 <script src="scripts/meuoutroscript.js"</script> Para utilizar a biblioteca jquery, pode-se fazer o download: através do site: via Git: git clone git://github.com/jquery/jquery.git utilizar o link para a versão online: 1 <script src="//code.jquery.com/jquery min.js"></script> jquery Selectors Um dos maiores poderes do jquery está na sua capacidade de selecionar elementos a partir de seletores CSS. Como já aprendemos, exitem diversas formas de selecionarmos quais elementos ganharão determinado estilo. Infelizmente muitos desses seletores não funcionam em todos os navegadores. Contudo, no jquery, os temos todos à nossa disposição. Por exemplo, se quisermos esconder todas as tags <td> filhas de um <tbody>, basta: 1 $( tbody td ).hide(); Seletores mais comuns: 1 // pinta o fundo do formulario com id "form" de preto 2 $( #form ).css( background, black ); 3 4 // esconde todos os elementos com o atributo "class" igual a "headline" 5 $(.headline ).hide(); 6 7 // muda o texto de todos os parágrafos 8 $( p ).text( alo :D ); Mais exemplos: 1 $( div > p:first ); // o primeiro elemento <p> imediatamente filho de um < div> 2 3 $( input:hidden ); // todos os inputs invisiveis 4 5 $( input:selected ); // todas as checkboxes selecionadas 6 7 $( input[type=button] ); // todos os inputs com type="button" 8 9 $( td, th ); // todas as tds e ths Lembre-se de que a função que chamamos após o seletor é aplicada para todos os elementos retornados. Veja: 1 // forma ineficiente 2 alert($( div ).text() + $( p ).text() + $( ul li ).text()); 3 4 // forma eficiente :D 5 alert($( div, p, ul li ).text()); A função text() é chamada para todos os <div>s, <p>s, e <li>s filhos de <ul>s.

74 Tabela 1: Seleção Básica Seleção Descrição #id Seleciona o elemento com determinado id Exemplo: $( #primdiv ).css( background-color, black ); elemento Seleção pelo elemento html Exemplo: $( div ).css( border, 9px double red );.classe Elementos de detrminada classe Exemplo: $(.destaque ).css( fontweight, bolder );.classe.classe Elementos que pertençam a ambas classes. Exemplo: $(.destaque.especial ).css( color, red ); *. Todos elementos Exemplo: $( * ).css( color, black ); Combinação dos anteriores com vírgula Exemplo: $( div,span,p.olho ).css( margin, 3px ); Tabela 2: Seleção Hierárquica Seleção Descrição Ascendente Descente Seleção de descendentes de determinado elemento. Exemplo: $( form label ).css( color, gray ); Pai > Filho Seleção de elementos-filho de um determinado elemento. Exemplo: $( #conteudo > * ).css( border, 2px solid green ); Anterior + Seguinte Seleção de elemento que segue-se a um determinado elemento. Exemplo: $( label + input ).css( border, 1px dotted blue ); Anterior Irmãos Seleção de elementos-irmãos após determinado elemento. Exemplo: $( #inicio div ).css( color, aquamarine );

Exibir mais