XHTML / CSS. Professora: Lucélia Alves de Oliveira

Transcrição

1 XHTML / CSS Professora: Lucélia Alves de Oliveira

2 Conceitos Redes de Computadores: Uma rede de computadores consiste de dois ou mais computadores ligados entre si e compartilhando dados, impressoras, trocando mensagens ( s), etc.internet é um exemplo de Rede. Existem várias formas como os recursos de vários equipamentos interligados podem ser compartilhados, mediante meios de acesso, protocolos e requisitos de segurança. Internet: A Internet é uma rede de redes em escala mundial de milhões de computadores. Ao contrário do que se pensa comumente, Internet não é sinônimo de World Wide Web. Esta é parte daquela, sendo a World Wide Web, que utiliza hipermídia em sua formação básica, um dos muitos serviços oferecidos na Internet. A Web é um sistema de informação muito mais recente que emprega a Internet como meio de transmissão. www: Significa World Wide Web. É um dos serviços básicos da Internet, é a parte gráfica que possibilita acesso simultâneo a imagens, animações, sons, vídeos e textos. Sua maior característica é a possibilidade de navegação através dos "links". Intranet: É uma rede de computadores privativa que utiliza as mesmas tecnologias que são utilizadas na Internet. O protocolo de transmissão de dados de uma intranet é o TCP/IP e sobre ele podemos encontrar vários tipos de serviços de rede comuns na Internet, como, por exemplo, o , chat, grupo de notícias, HTTP, FTP entre outros. Extranet: Pode ser definida como um conjunto de duas ou mais intranets ligadas em rede. Protocolo IP: Significa em português, Protocolo Internet, e é utilizado para a comunicação através da rede Internet. Os dados são enviados em grupos intitulados "pacotes". Daí a designação de pacote IP. É o endereço de um computador em uma rede TCP/IP. Todo computador na Internet possui um endereço IP. Clientes têm um endereço IP permanente ou um que é atribuído dinamicamente a eles cada vez que eles conectam à rede. Host: Computador principal num ambiente de processamento distribuído ou o computador central que controla uma rede. Na Internet é qualquer computador ligado à rede, não necessariamente um servidor. Navegador: Também conhecido como browser. É o programa usado para visualizar a parte gráfica da Internet. Alguns exemplos: Netscape, Internet Explorer, Ópera. Navegadores com código aberto muito ágeis são o Mozilla e o Firefox. Provedor de Acesso à Internet: É uma empresa ou organização que oferece à seus clientes o acesso à Internet. Além de oferecer aos seus usuários o acesso à Internet, podem oferecer outros serviços adicionais, ou de valor agregado, relacionados: registro de domínios e hospedagem de páginas (Web-Hosting), contas de , são alguns exemplos destes serviços. Servidor Web: Programa que fornece o material apresentado pelo browser. Pode conectar-se a bancos de dados. Exemplos: JSP, PHP, ASP.Net, Cold Fusion, CGI. Home Page: Página inicial de um site da Web. Referenciado por um endereço eletrônico ou hiperlinks. É a página de apresentação da empresa. Escrita em HTML, pode conter textos, imagens, sons, ponteiros ou links para outras páginas ou outros servidores da Internet, etc. File Transfer Protocol (FTP): É um protocolo pra transferência de arquivos na Internet. É utilizado para fazer upload e download através do qual os arquivos são carregados e baixados. Muitos sites FTP na Internet restringem o acesso; somente os usuários autorizados e com senhas têm permissões para acessá-los. URL: É o endereço da página Web exibido na janela do navegador. Cada página está associada a um único URL. Os URLs normalmente iniciam com http: / / HTTP: Significa HyperText Transfer Protocol, é o padrão da indústria para transeferir documentos Web pela Internet. Vários métodos estão disponíveis para navegar entre os URLs diferentes. Em um método o usuário digita o URL de uma página no campo Endereço e pressiona a tecla Enter. Outra maneira de navegar pela Web é através dos elementos 2

3 visuais em páginas Web, através dos chamados hiperlinks que ao serem clicados, carregam um documento Web especificado. Tanto imagens como textos podem estar vinculados a um hyperlink. Hyperlink: Faz referência a outras páginas Web, endereços de correio eletrônico e arquivos. HTML é a abreviatura de "HyperText Mark-up Language" O que significa H-T-M-L? Hyper é o oposto de linear. Nos tempos antigos, os programas de computadores rodavam linearmente: quando o programa executava uma ação tinha que esperar a próxima linha de comando para executar a próxima ação e assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode ir de onde estiver para onde quiser. Exemplificando: não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net. Text é texto e nada mais. Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor: seus cabeçalhos, marcadores, negrito, etc Language significa linguagem e é exatamente o que HTML é: uma linguagem. XHTML (extensible HyperText Mark-up Language) nada mais é do que uma maneira mais bem estruturada de escrever HTML. O que são tags HTML? Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe uma barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dão na mesma tag. Tais tags contêm comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />. Exemplo: a tag <h1> informa ao navegador que se trata de um cabeçalho e todo o conteúdo que estiver entre <h1> e </h1> deve ser mostrado em tamanho maior, significando o nível de importância do texto. As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que se trata de um cabeçalho (h vem de "heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível (maior) e <h6> o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto. Exemplo 2: <h1>este é um título</h1> <h2>este é um sub título</h2> As tags devem ser escritas com letras maiúsculas ou minúsculas? Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas. <COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com minúsculas. 3

4 O que é necessário para construir um website: Um navegador e Um bloco de notas (ou um editor de texto similar). HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer. A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag <html>. Então, antes de qualquer coisa digite <html> na primeira linha do documento. <html> é uma tag de abertura e deve ser fechada com a tag de fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não iremos esquecer-nos de fechar a tag HTML, faça isso agora mesmo, digitando </html> localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas <html> e </html>. Como colocar conteúdo no meu website? Um documento HTML é composto de duas partes: um head e um body. Na seção head você escreve informações sobre a página e na seção body você coloca as informações que constituem a página. Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acresentar um título é <title>: Exemplo: <title>minha primeira página web</title> O título não aparece na página propriamente dita. Tudo o que você quer que apareça na página é conteúdo e deverá ser colocado entre as tags "body". Queremos uma página dizendo: "Esta é a minha primeira página web". Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite na seção body o seguinte: < body> <p>esta é a minha primeira página web.</p> A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é - um texto parágrafo. Seu documento HTML agora está como mostrado a seguir: <html> <head> <title>minha primeira página web</title> </head> <p>esta é a minha primeira página web</p> </html> Pronto! Você acaba de construir seu primeiro website! 4

5 Agora basta que você salve seu trabalho no HD (com a extensão.html) e depois visualize no navegador. Coloque sempre o título do seu documento na seção head: <title>título da sua página</title>. O título <title> é muito importante porque é usado pelos mecanismos de busca (tais como o Google). Exemplos de Tags: <br /> Pula linha <hr /> Linha Horizontal <blockquote>indentação</blockquote> Criação de Listas Existem dois tipos de listas: listas ordenadas e listas não ordenadas. O elemento ul cria uma lista não ordenada, em que cada item da lista inicia com um símbolo marcador. Este marcador pode ser modificado através do atributo type. O elemento ol cria uma lista ordenada, em que cada item da lista inicia com um número para organizar a lista. Este número pode ser modificado para algarismos romanos, por exemplo, através do atributo type. O elemento li serve para indicar cada item da lista. É possível colocar uma lista dentro de outra lista, isso se chama listas aninhadas. Exemplos: Diferentes tipos de listas não ordenadas <html> <head> <title>exemplo de listas não ordenadas</title> </head> <h4>lista com discos como marca:</h4> <ul type="disc"> <li>bagaceira</li> <li>aguardente de Medronho</li> <li>cachaça</li> </ul> <h4>lista com anéis como marca:</h4> <ul type="circle"> <li>bagaceira</li> <li>aguardente de Medronho</li> <li>cachaça</li> <li>ginja com Elas</li> </ul> <h4>lista com quadrados como marca:</h4> <ul type="square"> <li>bagaceira</li> <li>aguardente de Medronho</li> <li>cachaça</li> <li>ginja com Elas</li> </ul> 5

6 </ul> </html> Diferentes tipos de listas ordenadas <html> <head> <title>exemplo</title> </head> <h4>lista Ordenada com números:</h4> <ol> </ol> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> <h4>lista Ordenada com letras maiúsculas:</h4> <ol type="a"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> <h4>lista Ordenada com letras minúsculas:</h4> <ol type="a"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> <h4>lista Ordenada com números romanos (maiúsculas):</h4> <ol type="i"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> <h4>lista Ordenada com números romanos (minúsculas):</h4> <ol type="i"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> 6

7 </html> Exercícios 1. Enumere as colunas: a) Intranet ( ) É utilizado para a comunicação através da rede Internet. É o endereço de um computador em uma rede TCP/IP. b) www ( ) É o programa usado para visualizar a parte gráfica da Internet. c) Protocolo IP ( ) Rede de computadores privativa, utiliza as mesmas tecnologias da Internet d) Navegador ( ) É um dos serviços oferecidos pela Internet, é a parte gráfica. Possibilita acesso simultâneo a imagens, animações, sons, vídeos e textos. e) Servidor Web ( ) É uma rede de redes em escala mundial de milhões de computadores f) Redes de Computadores ( ) Programa que fornece o material apresentado pelo browser g) Internet ( ) Consiste de dois ou mais computadores ligados entre si e compartilhando dados, impressoras, trocando mensagens ( s), etc. 2. Diga se as afirmações são verdadeiras ou falsas. Se forem falsas, explique por quê. a. ( ) O atributo type, quando utilizado com um elemento ol, especifica um tipo de seqüência. b. ( ) Uma lista ordenada não pode ser aninhada dentro de uma lista não ordenada. c. ( ) XHTML é a junção de XML com HTML. d. ( ) O elemento br representa uma quebra de linha e. ( ) Os hiperlinks são marcados com a tag <link> Justificativas: 3. Preencha as lacunas em cada uma das afirmações: a. O elemento insere uma linha horizontal b. O sebrescrito é marcado com o elemento, e o subscrito é marcado com o elemento. c. O elemento de cabeçalho menos importante é e o elemento mais importante de cabeçalho é. d. O elemento marca uma lista não-ordenada. e. O elemento marca um parágrafo. f. Os comentários de XHTML iniciam com <!--- e terminam com. g. Em XHTML os valores de atributos devem estar entre. 4. Utilize a XHTML para criar um documento para o seguinte texto. Fundamentos de Linguagens para Web Os conhecimentos relacionados à Tecnologia da Informação são essenciais para se conquistar um lugar no mercado de trabalho atual. Segundo artigo divulgado pelo site UOL, daqui a cinco anos faltarão profissionais para atuar nessa área. 7

8 5. Por que a seguinte marcação é inválida? <p> Aqui tem um texto... <hr /> <p> E aqui mais texto!!! </p> 6. Crie um documento XHTML que contenha uma lista ordenada de seus sites Web favoritos. A página deve conter o título: Meus sites favoritos. 7. Crie um documento XHTML que contendo 3 listas ordenadas: sorvete, salada de frutas e iogurte gelado. Cada lista ordenada deve conter uma lista uma lista aninhada não ordenada e seus sabores e/ou frutas favoritas. Forneça no mínimo 3 sabores em cada lista não-ordenada. Inserção de Imagens Imagens Para inserir uma imagem na página utilizamos: O elemento img para informar que se trata da inserção de uma imagem. O atributo src para informar o caminho da imagem. O atributo alt é para fazer uma descrição da imagem, quando a imagem não for aberta, esse texto irá aparecer. O atributo height indica a largura em que a imagem deve aparecer na página. Exemplo de sintaxe para inserção de figura: <img src= imagens/nomedaimagem.jpg alt= Descriçao da imagem width= 28px height= 50px > Ajuste de imagens <p><img alt="caminho para peões" src="imagem/caminho.jpg" width= "75px" height="50px"><p> <p><img alt="caminho para peões" src="imagem/caminho.jpg" width= "150px" height="100px"><p> <p><img alt="caminho para peões" src="imagem/caminho.jpg" width= "300px" height="200px"><p> <p><b>nota:</b> Para alterar o tamanho de uma imagem utilize os atributos "height" (altura) e "width" (largura). Construção de links Para construir um link é necessário um elemento e um atributo: O elemento a indica que se trata de um link; O atributo href indica para onde ir quando o link for clicado. Exemplo: <a href=" um link para o Google</a> 8

9 No exemplo acima o atributo href tem o valor " que é o endereço completo do site Google e é chamado de URL (Uniform Resource Locator). Notar que " deve sempre ser incluído nas URLs. A frase "Aqui um link para o Google" é o texto mostrado no navegador como link. Lembre-se de fechar a tag com um </a>. Links dentro da própria página Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo name e o símbolo "#". Use o atributo name para marcar o elemento que é o destino do link. Por exemplo: <a name="menu"></a> Você agora pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve ser seguido pelo valor atribuído ao name para onde o link vai. Exemplo: <a href="#menu">link para o cabeçalho 1</a> Links para Você pode criar link para um endereço de . Isto é feito de modo semelhante aos links para documentos. Exemplo: <a href="mailto:lucelia.com@gmail.com">enviar para Professora Lucélia</a> Será renderizado no navegador assim: Enviar para Professora Lucélia A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo endereço de . Quando o link é clicado o programa de padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de (como o Outlook Express) instalado na sua máquina. Imagens como Links Para substituir o texto clicável por uma imagem clicável, basta substituir o texto entre as tags <a> e </a> por uma imagem, como no exemplo abaixo: <a href="paginadedestino.html"><img src= imagens/nomedaimagem.jpeg alt= Texto alternativo ></a> EXERCÍCIOS Exercício 01- INSTRUÇÕES Criar uma página web contendo 3 imagens de cachorros da raça São Bernardo e uma breve descrição (características) sobre essa raça. Salvar a página com o nome: saobernardo.htm (NÃO COLOCAR ACENTUAÇÃO) Exercício 02- INSTRUÇÕES 9

10 Criar uma página web contendo 3 imagens de cachorros da raça Pastor Alemão e uma breve descrição (características) sobre essa raça. Salvar a página com o nome: pastoralemao.htm (NÃO COLOCAR ACENTUAÇÃO) Exercício 03- INSTRUÇÕES Criar uma página web contendo 3 imagens de cachorros da raça Cocker e uma breve descrição (características) sobre essa raça. Salvar a página com o nome: cocker.htm Exercício 04- INSTRUÇÕES Criar uma página web contendo 3 linkamentos para as páginas da raça São Bernardo, Pastor Alemão e Cocker. Contendo uma breve descrição sobre os cachorros e o título da página como: index.htm. Seja criativo!! Salvar a página com o nome: guiaderacas.htm (NÃO COLOCAR ACENTUAÇÃO) Tabelas Tabelas são usadas para apresentar "dados tabulares", isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica. Criar tabelas em HTML pode parecer complicado, mas, acompanhando passo a passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML. <table> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> </table> Será renderizado no navegador assim: Célula 1 Célula 2 Célula 3 Célula 4 Considerações: As tabelas constroem-se com o elemento <table>. As linhas da tabela obtêm-se com o elemento. As células de dados criam-se com o elemento <td> Para que a apareçam as linhas da tabela, use o atributo border. Exemplos: 10

11 <h4>uma coluna:</h4> <table border = "1"> <td>100</td> </table> <h4>uma linha e três colunas:</h4> <table border="1"> <td>100</td> <td>200</td> <td>300</td> </table> <h4>duas linhas e três colunas:</h4> <table border="1"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> </table> Decoração da tabela <h4>uma linha de fronteira normal, com um plano de fundo colorido: </h4> <table border="1" style="background-color:pink;"> <td>primeira</td> <td>linha</td> <td>segunda</td> <td>linha</td> </table> <h4>uma linha de fronteira mais espessa com as células específicas coloridas:</h4> <table border="8"> <td style="background-color:yellow; color: red;" >Primeira</td> <td>linha</td> <td>segunda</td> <td style="background-color:yellow;"> Linha</td> 11

12 </table> <h4>uma linha de fronteira muito espessa:</h4> <table border="15"> <td>primeira</td> <td>linha</td> <td>segunda</td> <td>linha</td> </table> Utilizando elementos em uma tabela <table border="1"> <td> <p>isto é uma frase</p> <p>isto é outa frase</p> </td> <td>esta célula contém uma tabela: <table border="1"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </table> </td> <td>esta célula contém uma lista: <ul> <li>livros</li> <li>revistas</li> <li>jornais</li> </ul> </td> <td>esta contem uma imagem <img src= imagem/magoo.gif > </td> <td>esta contém apenas texto.<br/> </td> <td> Esta contem uma imagem que linka: <a href= pagina.htm ><img src= imagem/magoo.gif ></a> </td> </table> 12

13 Mesclando linhas e colunas <table border="1"> <td colspan="2">colunas 1 e 2</td> <td>linha 1, coluna 1</td><td>linha 1, coluna 2</td> <td>linha 2, coluna 1</td><td>linha 2 coluna 2</td> <td rowspan="3"> 3linhas</td><td>uma linha</td> <td> Duas linhas</td> <td>três linhas</td> </table> EXERCÍCIOS INSTRUÇÕES Construa as tabelas a seguir: Cada exercício é uma página. Exercício 01- Relação de alunos e notas Nome do Aluno Matéria Nota Resultado Joaquim Matemática 7,0 Aprovado Pedro Física 6,5 Aprovado Maria Eduarda Química 10,0 Aprovado Pedro Henrique Português 4,0 Reprovado Exercício 02-13

14 Exercício 03- Quantidade de alunos por turma Curso Turma Número de alunos Sistemas de Informação A 35 Sistemas de Informação B 25 Tecnologia de Informação A 45 Exercício 04- Relação de Jogos Marca do game Nome do Jogo Gênero Mario Party Aventura Mario Kart Corrida Nintendo 64 Turok Aventura Bomberman Aventura PlayStation Road Rash Corrida de moto Tomb Raider Ação 007 Ação Exercício 05- Áreas e cursos da Faculdade Sistema de Informação Administração de Empresas Informática Administração Tecnologia de Informação Administração Hospitalar Exercício 06- Trabalhando imagens e links dentro de tabelamento Fazer um link para a página do exercício 1 Clique na imagem ao lado e veja o exercício 5. Formulários 14

15 Um formulário é basicamente uma página Web com campos de entrada que permitem que você envie informações. Quando o formulário é enviado,tais informações são empacotadas e enviadas a um servidor Web para serem processadas por uma outra aplicação Web. Quando o processo termina você obtémoutra página Web com uma resposta. Exemplo: <html> <head> <title>untitled</title> </head> <form action=" <h1>preencha seu currículo</h1> Nome do candidato:<br /> <input type="text" size="50" maxlength="3"/><br /><br /> Sexo:<br /> <input type="radio" name="sexo" value="m" />Masc<br /> <input type="radio" name="sexo" value="f" />Fem<br /><br /> Áreas de interesse:<br /> <input type="checkbox" />Técnica<br /> <input type="checkbox" />Administrativa<br /> <input type="checkbox" />Recursos Humanos<br /><br /> Estado Civil:<br /> <select name="est_civil"> <option value="0">escolha uma Opção</option> <option value="1">casado</option> <option value="2">solteiro</option> </select> <br /><br /> Resumo:<br /> <textarea name="comentario" cols="30" rows="20">insira aqui um resumo do seu curr&iacuteculo</textarea><br /><br /> Escolha uma senha de acompanhamento: <br /> <input type="password" name="senha" size="25"/><br /><br /> Confirme sua senha:<br /> <input type="password" name="senha" size="25"/><br /><br /> </form> </html> Este código irá resultar no formulário abaixo: 15

16 Exercícios Criar um Documento XHTML para apresentar e enviar para o servidor o formulário abaixo: Ficha de Inscrição Nome do candidato: Endereço: CEP: Telefones: RG: CPF: Sexo: Masc. Fem. Escolaridade: Curso: Senha de acompanhamento: 16

17 Observações: Cidades: - Brasília - Taguatinga - Sobradinho - Águas Claras UF: - DF - GO Escolaridade: - Ensino Fundamental - Ensino Médio - Superior Incompleto - Superior Completo - Pós-Graduação Curso: - Web Design - Lógica de Programação - Java - Delphi 17

18 Folhas de Estilo - CSS O CSS (Cascading Style Sheets) - Folhas de Estilos em Cascata, permite projetar websites com uma técnica completamente diferente da convencional e possibilita uma considerável redução de tempo e trabalho. CSS é uma linguagem para estilos que define o layout de documentos XHTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. O XHTML pode ser indevidamente usado para definir o layout de websites. Contudo, CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. O XHTML é usado para estruturar conteúdos. A CSS é usado para formatar conteúdos estruturados. Para as necessidades de formatação de layouts, os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tags HTML tais comoa tag <font> que se diferenciava das tags originais do HTML pelo fato de destinarse a layout e não à estrutura. Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura, como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites. A CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers, meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo, a separação dos estilos de apresentação da marcação dos conteúdos, torna a manutenção dos sites bem mais fácil. Funcionamento da CSS Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML. Assim, se você está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que usaremos. Vamos dar uma olhada em um exemplo concreto. Sintaxe básica das CSS: Suponha que desejamos uma cor de fundo vermelha para a página web: Usando HTML podemos fazer assim: <body bgcolor="#ff0000"> Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;} Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS: 18

19 Onde colocar o código CSS O código CSS pode ser aplicado a um documento de três maneiras distintas. O método mais recomendado é o método externo. Método 1: In-line (o atributo style) Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir: <html> <head> <title>exemplo</title> </head> <body style="background-color: #FF0000;"> <p>esta é uma página com fundo vermelho</p> </html> Método 2: Interno (a tag style) Uma outra maneira de aplicar CSS é pelo uso da tag <style> do HTML no cabeçalho do documento. Como mostrado a seguir: <html> <head> <title>exemplo<title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <p>esta é uma página com fundo vermelho</p> </html> Método 3: Externo (link para uma folha de estilos) O método mais recomendado é o de lincar para uma folha de estilos externa. Uma folha de estilos externa é um simples arquivo de texto com a extensão.css. Tal como qualquer outro tipo de arquivo, você pode colocar uma folha de estilos tanto no servidor como no disco rígido. 19

20 Vamos supor, por exemplo, que uma folha de estilos tenha sido nomeada de style.css e está localizada no diretório style. Tal situação está mostrada a seguir: O "truque" é criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link é criado em uma simples linha de código HTML como mostrado a seguir: <link rel="stylesheet" type="text/css" href="style/style.css" /> Observe que o caminho para a folha de estilos é indicado no atributo href. Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>, conforme mostrado abaixo: <html> <head> <title>meu documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head>... Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML. A coisa realmente inteligente disso é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML. Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma, as, para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de estilos central. 20

21 style.css body { background-color: #FF0000; } index.html <html> <head> <title>meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <h1>minha primeira folha de estilos</h1> </html> Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".html") Exercícios CSS 1. Crie um Documento XHTML para inserir o CSS Inline abaixo e salve-o com o nome cssinline.html: <html> <head> <title>exemplo</title> </head> <body style="background-color: #FF0000;"> <p>esta é uma página com fundo vermelho</p> </html> 2. Crie um Documento XHTML para inserir o CSS Interno ou incorporado abaixo e salve-o com o nome cssinterno.html: <html> <style type="text/css"> <!-- h1 {color: #0000FF; font-size: 30px; font-family: Comic Sans MS} p {text-indent: 1cm; background-color: yellow; font-family: arial} body {background-color:#00000f} --> </style> <head> <title> Meu primeiro style sheet</title> </head> <h1>meu primeiro style sheet</h1> <p>agora terei o controle total!</p> </html> 3. Crie o seguinte documento externo para formatação, chamado de básico.css a{text-decoration:none} Tira o sublinhado de todos os links a:link{color:green} Muda para verde a cor dos links ainda não visitados a:visited{color:brown} Muda para marrom a cor dos links já visitados a:hover{color:yellow} Muda para amarelo a cor dos links ao passar o mouse 21

22 4. Crie um Documento XHTML para inserir o CSS Externo abaixo e salve-o com o nome cssexterno.html: <html> <head> <title>meu documento</title> <link rel="stylesheet" type="text/css" href="basico.css" /> </head> <h2>estes links estão formatados de forma diferenciada da padrão</h2> <a href=" <br /> <br /> <a href=" </html> OBS. A linha de comando em negrito, é a que está chamando o arquivo CSS externo. Siga sempre este padrão, mudando apenas o nome do arquivo CSS, no caso básico.css 5. Coloque uma imagem de fundo no documento cssexterno.html, para isso salve uma imagem no mesmo diretório dos seus arquivos e altere o arquivo basico.css, acrescentando: body { background-image: url("imagem.jpeg"); } 6. Faça com que a imagem se repita no fundo do documento XHTML, altere o arquivo basico.css, acrescentando: body { background-image: url("imagem.jpeg"); background-repeat: repeat; } 7. Faça com que a imagem permaneça fixa, mesmo quando a barra de rolagem rolar para baixo ou para cima, altere o arquivo basico.css, acrescentando: Nota: para ver a funcionalidade deste exercício, o texto deverá ser grande, sendo necessário o uso do scroll. body { background-image: url("imagem.jpeg"); background-repeat: no-repeat; background-attachment: fixed; } 8. Faça com que a imagem role junto com o texto quando a barra de rolagem rolar para baixo ou para cima, altere o arquivo basico.css, mudando o atributo background-attachment para scroll: body { background-image: url("imagem.jpeg"); background-repeat: no-repeat; background-attachment: scroll; } 9. Crie um Documento XHTML para chamar as três páginas criadas anteriormente e salve-a com o nome index.html: 10. Retire o sublinhado de todos os links criados no exercício 9. EXERCÍCIOS 2 22

23 Tomando como base um documento XHTML, introduza as modificações propostas nos itens abaixo, na ordem sugerida. Para a realização dos testes das diversas propriedades CSS, use uma referência para consulta. Após cada alteração, abrir o documento no navegador e verificar os resultados. 1. Alterar a cor de fundo de toda a página para azul. 2. Alterar a cor de fundo de um parágrafo para vermelho. Use uma classe como seletor. 3. Alterar a cor de fonte do mesmo parágrafo para branco. Use outra classe como seletor. 4. Na segunda classe criada, defina outra cor de fundo e verifique o resultado da precedência. Desfaça esta última alteração. 5. Acrescente uma imagem de fundo que se repita ao longo de toda a página. 6. Acrescente uma propriedade que evite a repetição da imagem de fundo. 7. Faça a imagem de fundo repetir-se apenas horizontalmente. 8. Faça a imagem de fundo repetir-se apenas verticalmente. 9. Posicione a imagem de fundo no canto superior direito da janela. 10. Posicione a imagem de fundo no centro da janela, nas duas dimensões, usando a palavra reservada center. 11. Posicione a imagem de fundo a 20% do topo e a 30% da margem esquerda. 12. Defina a fonte de um parágrafo para 150px. 14. Decore um parágrafo com uma linha sobre suas linhas. 15. Decore outro parágrafo sublinhando-o. 17. Para as duas questões anteriores, repita o procedimento em apenas um trecho do parágrafo, usando o elemento <span>. 18. Justifique um dos parágrafos. 19. Centralize um dos parágrafos. 20. Em um dos parágrafos, force o recuo da primeira linha de texto em 100px. 21. Transforme todas as letras em minúsculas em um parágrafo. 22. Transforme todas as letras em maiúsculas em um parágrafo. 23. Transforme a primeira letra de cada palavra em maiúscula de todo um parágrafo. 30. Defina bordas para o parágrafo anterior com 2px, estilo sólido e cor preta; 31. Altere as bordas de outro parágrafo, fazendo com que cada um dos lados tenha um estilo, uma cor e uma espessura diferente de borda. 34. Defina as propriedades do parágrafo anterior width e height para 30% e 80% respectivamente. 35. Insira conteúdo nesse parágrafo de modo a extrapolar o tamanho definido. 36. Defina a propriedade overflow com o valor scroll e verifique a diferença. 23

24 24