Doc 10.7.3
Propaganda
WEB / INTERNET Sumário Módulo 1 -­‐ XHTML Básico ............................................................................................................................ 1 Módulo 2 – Botões ........................................................................................................................................ 11 Módulo 3 – Cascading Style Sheets ......................................................................................................... 14 Módulo 4 – Meta Tags ................................................................................................................................. 19 Desenvolvido por Ana Cuperschmid, 2006. WEB / INTERNET WEB / INTERNET Módulo 1 - XHTML Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide Web atualmente. Ela é muito parecida com o html (Hypertext Markup Language), simplesmente mais rigorosa em sua codificação. Apesar dessa aparente sofisticação, as páginas Web não passam de documentos de texto simples. Podem ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferença é que as páginas Web contêm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos são marcados como títulos, outros como parágrafos. As marcações são usadas também para indicar os links que levam a outros documentos na rede. Essas marcas são chamadas de tags e estão especificadas dentro da linguagem utilizada para criar as páginas Web, html. 1.1. O mínimo que você precisa saber sobre html O primeiro conceito que deve-se ter em mente ao projetar páginas Web é que html não foi criada para controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout de página. Como dissemos há pouco, os tags de html apenas informam ao navegador o que são os elementos que estão na página. Eles dizem, por exemplo, que um determinado trecho é o título principal do documento e outro é um item de lista. A formatação do trecho é deixada para o navegador. Cada navegador mostra a página de uma forma um pouco diferente, o que dificulta o trabalho de programação visual na Web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensação é muito simples criar uma página básica para colocar na Internet com html. Neste capítulo, apresentamos um exemplo enxuto, que aos poucos ficará mais sofisticado. 1.2. Visualizando o exemplo no navegador Assim que o exemplo for salvo no editor de texto com a extensão .htm ou .html, pode-se visualizá-lo em um navegador. Para abrir o arquivo, deve-se escolher Open, Open File ou Open Local File no menu File do navegador. Alguns navegadores tem um botão Open na barra de botões. 1.3. Regras gerais para nomear arquivos Utilize somente nomes em minúsculas, sem acentos e sem espaços entre as letras. Utilize somente a extensão “.html” 1.4. Como funcionam os tags O html é orientado por marcadores ou TAGs. Eles são os comandos utilizados pela linguagem html. Cada TAG informa ao programa visualizador ou Browser, como ele deverá formatar o texto e deve estar dentro dos sinais de menor que (<) e maior que (>). Exemplo: <html>, <body>, etc. Os TAGs podem ser únicos ou duplos, com início e fim. Exemplos: TAG único: <br /> TAG duplo: <p>....</p> ATENÇÃO: utilize somente letras minúsculas para os tags! 1 WEB / INTERNET 1.5. Tags básicos Existem quatro pares de tags que devem ser sempre colocados na página. O par de tags <html> e </html> deve englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao navegador que se trata de um documento html. O documento, por sua vez, está dividido em duas partes: o cabeçalho e o corpo do texto, cada um indicado por um par de tags diferente. Tudo que estiver entre o par <head> e </head> irá compor o cabeçalho, não aparecendo na página. O elemento principal do cabeçalho é o título do documento, que deve ser colocado entre o par <title> e </title>. Os navegadores mostram o título na barra de título do programa e na área em aparecem as páginas já visitadas. Por fim, existe o par <body> e </body>, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador. 2. Iniciando um Documento Todo o documento html fica contido entre os TAGS: <html> e </html>. Temos duas seções básicas: head - Contém parâmetros de configuração do documento. body - Contém o documento em si. <html>...</html> Envolvem todas as seções de um documento (head e body). <head>...</head> Envolvem a seção de cabeçalho do documento. <title>...</title> Indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na barra de título da sua Janela no Windows. <body>...</body> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND. A estrutura de um documento html é: <html> <head> <title>Título da Home Page</title> </head> <body> *** Conteúdo da Home Page *** </body> </html> 2 WEB / INTERNET 2.1. Títulos e Subtítulos No corpo do texto podem ser colocados até seis níveis de títulos. A hierarquia começa em <h1>, como o maior título, e termina em <h6>, como o menor. Os títulos <h5> e <h6> aparecem tão pequenos no navegador que provavelmente nunca serão usados. Texto inserido entre <h1> Título </h1>: Título Texto inserido entre <h2> Título </h2>: Título Texto inserido entre <h3> Título </h3>: Título 2.2. Parágrafos Os parágrafos são digitados normalmente. O tag <p> serve para indicar o início de um novo parágrafo e o tag </p> a finalização deste. Ex.: <p> Este é um parágrafo normal. </p> <p> Seguido de outro parágrafo simples.</p> Visualização: Este é um parágrafo normal. Seguido de outro parágrafo simples. 2.3. Quebra de linhas (espaçamento simples) Assim como as marcas de parágrafo, as quebras de linha são indicadas por um tag simples. Para abrir uma nova linha, usa-se o tag <br />. Ex. de uso: <p> Neste parágrafo eu gostaria de escrever somente uma <br /> Palavra<br /> Em uma linha separadamente</p> Visualização: Neste parágrafo eu gostaria de escrever somente uma Palavra Em uma linha separadamente 2.4. Acentuação e Caracteres Especiais Não é recomendável que os documentos Web contenham acentos. Ainda que todos os navegadores existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em html pode ficar truncado. Por exemplo, quando alguém copia uma página Web e a envia para outra pessoa através de correio eletrônico. Para contornar este problema, existe uma tabela de códigos 3 WEB / INTERNET que substituem os acentos. Os navegadores transformam estes códigos em caracteres acentuados e o documento poderá ser transmitido por qualquer meio. Para listagem completa de como descrever os acentos e caracteres especiais, visite a página: http://www.webmonkey.com/webmonkey/reference/special_characters/ Obs. Para facilitar a leitura, os exemplos deste manual contém os acentos normais de um editor de texto ao invés dos códigos. 2.5. Listas 2.5.1. Criando Listas Ordenadas Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números, como 1, 2, 3, e assim sucessivamente. Listas ordenadas são iniciadas pela TAG <ol>. Cada item utiliza a TAG <li>. Finalmente, </ol>. Exemplo: <p> Para fazer uma Home Page é preciso: </p> <ol> <li> ter paciência, </li> <li> ter bom gosto, </li> <li> dominar a técnica. </li> </ol> Visualização: Para fazer uma Home Page é preciso: 1. ter paciência 2. ter bom gosto, 3. dominar a técnica. 2.5.2. Criando Listas não Ordenadas Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é o fato de elas não definirem explicitamente uma ordem, como é no caso as numeradas. Eles são formados por símbolos, que podem ser bola, quadrado, e uma bola vazia. Elas são iniciadas com a TAG <ul> e são respectivamente terminadas com </ul>. E seus elementos são que nem as numeradas: com <li> Exemplo: <ul> <li>Internet </li> <li>Intranet </li> <li>BBS </li> </ul> Resultado: Internet Intranet BBS 4 WEB / INTERNET 2.6. Tabelas Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html A TAG <table> é utilizada para a representação de dados tabulares. A estrutura e o conteúdo da tabela devem ficar dentro das TAGs <table> </table> 2.6.1. Tabe Headings (tag th) - cabeçalho A TAG <th> é usada para especificar as células de cabeçalho da tabela. Essas células são diferentes das outras, pois seu conteúdo aparece geralmente em negrito. O elemento th pode ser apresentado sem conteúdo algum: isso corresponde a uma célula em branco. As tabelas podem ainda conter mais de um th para uma dada coluna, ou linha, ou simplesmente não conter nenhum elemento th, isto é, não conter em nenhuma célula em destaque. O TAG dela é: <th>texto em destaque</th> Observações: Elas devem ficar, assim como todas, dentro da TAG <table>. 2.6.2. Table Data (tag td) - célula A TAG <td> especifica a células de dados de uma tabela. Por se tratar de dados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o th, pode-se construir células em branco, usando o elemento td, como no exemplo a seguir: <td>Células de dados</td> 2.6.3. Tabel Row (tag TR) - linha A TAG <tr> indica o início de uma linha na tabela e a tag </tr> o fim. Cada linha da tabela pode conter várias células, e portanto, é necessário que se faça uso de uma marcação que indique exatamente o ponto de quebra de uma linha e início de outra. Toda linha deve terminar com um <tr>, com exceção da última linha da tabela, que dispensa o TR porque o uso da própria marcação de fim de tabela </table> torna implícito o fim da linha. 2.6.4. Atributos para a Tabela As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Os principais são: border Um atributo opcional para ser usado com “table” é o atributo “border”. Se ele estiver presente, a tabela será formatada com linhas de borda. Atenção: Todas as explicações acima como as que estão por vir, foram feitas, para que você possa saber o que significa a TAG em questão. Exemplo: <table border=”2”> <tr> <td>Notas/Alunos</td> <th>Eduardo</th> <th>Ana Lúcia</th> <th>Andréa</th> </tr> <tr> 5 WEB / INTERNET <th>Notas</th> <td>8,0</td> <td>9.3</td> <td>7.8</td> </tr> <tr> <th>No de Inscrição</th> <td>376234809</td> <td>387349048</td> <td>502350432</td> </tr> </table> Resultado: O atributo border pode também receber um valor que vai estabelecer qual a espessura (além da existência) da linha de borda da tabela (border="valor"). Se o valor atribuído for 0 (zero), o border funciona exatamente como o caso padrão, sem o border. Dessa maneira, é possível colocar tabelas em maior destaque, atribuindo um valor maior que 1 para o border. <table border=”5”> <tr> <td>TESTE</td> <td>TESTE2</td> <td>TESTE3</td> </tr> <tr> <td>TESTE4</td> <td>TESTE5</td> <td>TESTE6</td> </tr> </table> Resultado: align Este atributo pode ser aplicado a th, td ou TR e controla o alinhamento do texto dentro de uma célula, com ralação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda uma linha da tabela O exemplo abaixo, mostra como o align aceita os valores LEFT, CENTER ou RIGHT, para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente. 6 WEB / INTERNET Exemplo: <table> <tr> <td>Primeira célula</td> <td>Segunda célula</td> <td>Terceira célula</td> </tr> <tr> <td align="center">Centro</td> <td align="left">Esquerda</td> <td align="right">Direita</td> </tr> </table> Resultado: valign Pode ser aplicado a th e td e define o alinhamento do texto em relação às bordas superior e inferior. Aceite os valores top, MIDDLE, E BOTTOM para alinhar na parte de cima, no meio e na parte de baixo, respectivamente. Exemplo: <table> <tr> <td>Teste de alinhamento</td> <td valign="top">TOP</td> <td valign="middle">MIDDLE</td> <td valign="bottom">BOTTOM</td> </tr> </table> Resultado: 2.7. Imagens Podemos inserir imagens dentro de um documento html, mas devemos ter o máximo de cuidado, para não onerara transmissão para o usuário. Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels. Para inserir uma imagem, uso o TAG: <img>. Exemplo: <img src="figura1.gif" /> Os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso, juntamente com o documento html. 7 WEB / INTERNET 2.8. Links Os links permitem a interligação entre documentos html e outros documentos ou até arquivos FTP. Existem duas maneiras de referenciar um documento: relativo ou absoluto. Um caminho absoluto irá começar de um ponto fixo e um caminho relativo será definido em relação ao seu diretório corrente. Caminho absoluto: <a href="http://www.instructor.com.br/web/gaia/index.html">Site Gaia</a> Caminho relativo <a href="roteiros/index.htm">Roteiros</a> Quando você deseja chamar uma página que esteja em um nível acima do seu atual, você terá que indicar esta mudança usando “ ../ ” antes do diretório desejado para indicar que você está indo um nível para cima. Observe o mapa do site abaixo: A página index.html está na raiz do site. Dentro dela se você deseja chamar a página canyoning.html que está dentro de modalidades, basta um link <a href=”modalidades/canyoning.html” > Canyoning </a> Porém da página canyoning.html para a index.html que está na raiz do site é preciso indicar um nível acima: <a href=”../index.html”>Home</a> Suponha que na página canyoning.html você deseja incluir uma imagem que está dentro do diretório imagens. O caminho a percorrer seria: <img src=”imagens/thumb_canyoning.jpg”> Agora suponha que na página canyoning.html você deseja incluir uma imagem que está dentro do diretório imagens na raiz do site. O caminho a percorrer seria: <img src=”../imagens/modalidades.gif”> Links para e-mails: <a href=”mailto:[email protected]”> e-mail </a> Links usando imagens: <a href="roteiros.html"><img src=”roteiros.gif” border=”0” /></a> Links internos, dentro de uma mesma página: <a name=topo> Título da página </a> <p> texto </p> <p> texto </p> 8 WEB / INTERNET <p> texto </p> <a href= #topo>Topo da página</a> O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#" 2.9. Declaração do tipo de documento Todo documento HTML deve começar com uma declaração. Esta declaração identifica o tipo de documento e aponta para a o DTD (Document Type Definitions) contido no programa do browser. O DTD vai definir cada tag, cada atributo e entidade assim como especificar as regras para qual elas são usadas. Por fim, DTD determina como as páginas web vão ser mostradas no browser. Neste curso usaremos o XHTML 1.0 Transitional – que não permite o uso de tags depreciadas e atributos. O documento html então deverá começar com: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. Site GAIA Características: Nome: Gaia Turismo de Aventura. Na mitologia grega, Gaia é a personificação da Terra como deusa. O nome Gaia é utilizado como prefixo para designar as diversas ciências relacionadas com o estudo do planeta. Área de atuação: Turismo Ecológico / de Aventura Público alvo: Jovens adultos da classe AB 3.1. Mapa do site O mapa do site Gaia segue uma estrutura básica como mostra a seguir: Durante o projeto, caberá a cada aluno estabelecer outros elos de ligação entre as páginas do site. 3.2. Estrutura de diretórios O site Gaia segue a seguinte distribuição em diretórios: 9 WEB / INTERNET Atenção: Esta estrutura deve se manter ao longo de todo o projeto. 4. Sites recomendados para referência e estudo de html: http://24hourhtmlcafe.com/ http://www.cdcc.sc.usp.br/tutorial/intro.htm http://www.ccuec.unicamp.br/treinamento_int2004/conf_webpages_basico/ http://www.ead.unicamp.br/minicurso/html/ http://www.webmonkey.com/ Os códigos de cores que podem ser utilizados em documentos html: http://www.webmonkey.com/webmonkey/reference/color_codes/ 10 WEB / INTERNET Módulo 2 – Botões 1. Botões Até recentemente, botões em relevo com texto chanfrado ou ícones eram os principais métodos para controlar uma apresentação interativa. É verdade que sombras e relevos podem proporcionar uma fácil maneira de identificar entre os elementos de navegação e os que simplesmente ilustram idéias. Hoje, porém, o que constitui uma ferramenta de navegação incorpora praticamente tudo ser imaginado. Com tantas imagens para navegação e informações de acesso –algumas são bastante ambíguas – é crucial esclarecer o propósito dos controles através de um título, sobre ou sob o botão. Uma outra opção seria fazer com que o título aparecesse cursor passasse sobre o botão. que pode das quais texto, um quando o As diversas tecnologias possibilitam criar botões com pelo menos dois ou mais estados: O primeiro estado, é comum para todos os botões e chamado dormente – esperando para ser ativado. O estágio intermediário é o rollover, quando o mouse passa sobre o botão e normalmente possui algum efeito para dar destaque. Este estágio pode ser útil para que o usuário não perca o rastro do mouse, e também, para dizer “me clique!”. O estado seguinte, é o ativo – o qual o botão muda conforme é clicado e a mudança pode ser acompanhada por algum efeito sonoro. Outra opção, pouco usada, é o estágio fantasma, o qual mostra que o botão está momentaneamente inativo ou indisponível para seleção. 1.1. Desenvolvendo botões roolovers Agora veremos como é um página html com botões rollovers. A parte em verde é o JavaScript necessário para fazer a imagem trocar quando o mouse está sobre ela. É sempre igual, ou seja, podemos aproveitar o código copiar e colar em outra. O que está em rosa, é a solicitação de download da imagem que será trocada, para que no momento necessário ela já esteja disponível. Em azul, o é o JavaScript que precisa ser chamado para funcionar na página. Em vermelho, a identificação necessária da imagem,para que ela possa ser substituída no momento do mouse over. 11 WEB / INTERNET <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Pratica 1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onLoad="MM_preloadImages('imagens/rapel_over.jpg')"> <p>Rollover </p> <p><a href="pagina2.html" onMouseOver="MM_swapImage('adormecido','','imagens/rapel_over.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="imagens/rapel_adormecido.jpg" width="101" height="150" border="0" name="adormecido" id="adormecido"></a> </p> <p>&nbsp;</p> <p>&nbsp;</p> </body> </html> 2. Cursores 12 WEB / INTERNET O mouse pode ser usado como auxiliar para comunicação, criando opções que ajudem o usuário a alcançar o desejado. Modificar o mouse quando ele move por pontos importantes no monitor pode ser de incrível ajuda. O cursor pode ser programado para aparecer de diversas maneiras: Mais uma vez, através de CSS2 podemos definir como o cursor vai aparecer quando estiver sobre alguma imagem ou qualquer outro elemento. Observe a codificação abaixo: <html> <head> <style type="text/css"> <!-.cursor { cursor: wait; } --> </style> </head> <body> <img src="imagens/laranja1.gif" width="142" height="146" class="cursor"> </body> </html> A visualização quando o mouse passasse sobre a imagem seria: Referências Bibliográficas: Weinman, Lynda <designing web graphics. 4>. New Riders Publishing, 2003 Niederst, Jennifer – Web Design in a Nutshell, Second Edition. O’Reilly & Associates, 2001 Siegel, David – Creating Killer Web Sites. Hayden Books 1996 Site: http://www.w3.org/TR/REC-CSS2/ 13 WEB / INTERNET Módulo 3 – Cascading Style Sheets 1. Introdução ao CSS Cascading Style Sheets (css) são folhas de estilos que sobrepõe as características padrões dos browsers e são usadas para melhorar e controlar a aparência de uma página web. CSS permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação. Esta separação permite que o website inteiro, ou páginas específicas, sejam modificado através do uso de uma página css. Através do uso de css o web designer tem grande flexibilidade e controle para criar e manter um website. CSS também pode proporcionar a cada página uma aparência e um “sentimento” que seja consistente em todo o website. Os vários Web browsers interpretam css de diferentes maneiras ou às vezes, não interpretam nada. As páginas devem ser testadas no ambiente escolhido para assegurar que os resultados desejados são alcançados. Para a listagem completa sobre o suporte que os browsers oferecem ao css visite o site: www.ddj.com/webreview/style/ . Os estilos são aplicados aos elementos por diversas formas: na mesma linha (inline), embebidos nas páginas ou externos – através de um link na página html. É importante observar a ordem de precedência entre estes estilos, ela vai determinar qual estilo será o adotado pelo browser, assim o estilo externo é sobreposto pelo estilo embebido que por sua vez é sobreposto pelo inline. Em suma, se dois ou mais estilos estão brigando por um elemento html, o estilo mais próximo ganha. Veremos o potencial do uso de css, mas, primeiro devemos ter a certeza que as páginas estão de acordo com os padrões estabelecidos pelo W3 Consortium –www.w3.org. Uma página que tenha sido validada com sucesso, sem erros, tem mais chances de aparecer corretamente. 1.1. Estilo na mesma linha (Inline Style) É definido dentro de uma tag. Este estilo irá afetar somente a tag html na qual ela está definida. Ele é primeiramente usado em aplicações DHTML como programação JavaScript e em posicionamento dinâmico de elementos html. Sintaxe de um estilo na mesma linha: <seletor sytle=”atributo1:valor1;atributo2:valor2”> Qualquer texto </seletor> Exemplo: <h2 style=”color=:red”> Meu Título </h2> 1.2. Css Embebido na página web É definido na entre a seção <head> e </head> do documento html. Este estilo afeta somente as tags que estão dentro do documento em questão. Sintaxe de um estilo embebido: 14 WEB / INTERNET <style type=”tipo_link”> <!- seletor {atributo1: valor1; atributo2: valor2; } - -> </style> Type é a linguagem usada na folha de estilo de browsers antigos e “tipo_link” deve ser “text/css”. A tag de comentário (<!- - e - ->) esconde o estilo embebido de browsers que são incapazes de mostrar CSS. Exemplo: <style type=”text/css”> <!- p {color:#006699 } - - > </style> 1.3. Css Externa O estilo externo é definido por um arquivo texto separado salvo com extensão .css. O arquivo .css é referenciado pela tag <link>, a qual é colocada entre <head> e </head> da página. Este estilo vai afetar somente aqueles tags html que tenham sido definidos no arquivo .css e estão propriamente referenciados através do tag <link>. A sintaxe de um <link> tag: <link href="url" rel="relacao" type="link"> href é a url do arquivo css. rel é a relação entre o documento anexado e a página e “relacao” poderia ser por exemplo, “stylesheet”. type é a linguagem usada no documento lincado e “link” poderia ser “text/css”. Um exemplo de uma tag: <link href="iestyle.css" rel="stylesheet" type="text/css"> Sintaxe para um arquivo css: seletor {attribute1: value1; attribute2: value2} Segue um exemplo que poderia ser utilizado em um arquivo .css: 15 WEB / INTERNET body {font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; background-image: paper.gif } p {font-weight: bold; color: #CCCCCC; text-align: center; } hr {color: #006699 } a {font-size: 12pt font-weight: bold; color: #006699; text-decoration: none } a:hover {color: #000000; text-decoration: underline } h4 {font-size: 10pt } ul {list-style-type: square } ol {list-style-type: decimal } 1.4. Class Sintaxe para criar uma classe: <tag class="seletor"> Qualquer elemento html.</tag> Exemplo de uma classe sendo aplicada em um tag: <p class="intro">Seja bem vindo!</p> Sintaxe para aplicar um estilo à uma classe: .selector {attribute1:value1; attribute2:value2} Exemplo de um estilo sendo aplicado a uma classe: .intro {font-weight: bold; color: #CCCCCC; background-color: #000000; text-align: center; 16 WEB / INTERNET .box .text .contact width: 700px; padding-top: 10px; padding-bottom: 10px; border: outset} {background-color: #000000; text-align: center; padding: 1em; width: 330px; border: outset} {font-weight: bold; color: #CCCCCC; text-decoration: none; } {font-weight: bold; color: #FF0000} Qualquer elemento html pode ser redefinido pelo uso de css através da propriedade class em conjunto com as tags: <div> e <span>. Qual a diferença entre <div> e <span>? <div> causa a quebra da linha, ou seja, ao usá-lo os elementos necessariamente irão para a linha abaixo. E <span> pode ser usado em elementos sem causar a quebra da linha. Por exemplo: <head> <style type=”text/css”> <!- .itálico {font-style: italic} - -> </head> <body> <p>Aula de <div class=”italico”> Web / Internet </div> na Unicamp</p> </body> Seria visto numa página desta maneira: Aula de Web/Internet na Unicamp Já o seguinte código: <head> <style type=”text/css”> <!- .itálico {font-style: italic} - -> </head> <body> <p>Aula de <span class=”italico”> Web / Internet</span> na Unicamp </p> </body> Seria visto como: Aula de Web/Internet na Unicamp Isto se deve ao fato de alguns elementos serem block-level (causam a quebra da linha) e outros inline-level (não causam a quebra da linha). A seguir alguns exemplos: 17 WEB / INTERNET Block Elements <p> paragraph <body> body <br> line break <div> division <hr> horizontal rule <dd> definition description <dl> definition list <dt> definition term <li> list item Inline Elements <span> span <em> emphasis <strong> strong <i> italic <a> anchor <b> bold (negrito) <big> big <sup> superscript <sub> subscritpt Alguns exemplos de css podem ser encontrados em: http://www.microsoft.com/typography/css/gallery/ http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/ 1.5. Agrupamento de seletores Se você deseja fazer mudanças no estilo de vários elementos html e estas mudanças são iguais, é possível agrupar seletores. O que resulta em menor codificação e conseqüente mais rapidez de download. Por exemplo: p h3 dl {color:#FF6666; font-family:verdana} {color:#FF6666; font-family:verdana} {color:#FF6666; font-family:verdana} Poderiam ser agrupados como a seguir (note que os seletores devem ser separados por uma vírgula): p, h3, dl {color:#FF6666; font-family:verdana} Para quem quer aprofundar os estudos: http://www.maujor.com/tutorial/joe/cssjoe2.php http://www.ead.unicamp.br/minicurso/css/index.html http://www.csszengarden.com/ http://www.meyerweb.com/eric/css/ Referências Bibliográficas: WEINMAN, Lynda <designing web graphics. 4>. New Riders Publishing, 2003 NIEDERST, Jennifer – Web Design in a Nutshell. Second Edition. O’Reilly & Associates, 2001 Site: http://www.w3.org/ 18 WEB / INTERNET Módulo 4 – Meta Tags 1. Meta Tags O <meta> tag tem uma vasta aplicação, mas é primeiramente usada para incluir informação sobre um documento, como a data de criação, autor, ou informação sobre os direitos autorais. Os dados contidos no <meta> tag são úteis aos servidores, web browsers e mecanismos de busca e é invisível aos leitores. Os <meta> tags são colocado entre <head> e </head> em um documento, imediatamente seguindo o tag <title>. Existem inúmeros tipos de tags <meta> que podem ser usados nas suas páginas web. Os web browsers, web servers e mecanismos de busca vão tomar a informação contida no <meta> tag e processar. Não existem limites de quantos <meta> tags podem ser usados em documentos html. Existem dois tipos de <meta> tags: http-equiv e name. O atributo http-equiv provê informações que podem afetar a maneira com que o browser lida com com seu documento. Um exemplo de http-equiv pode ser: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> O atributo name é usado para inserir uma informação “escondida” no documento que não corresponda aos leitores de HTTP. Exemplo de name: <META NAME="author" CONTENT="Joana Bulartny"> <META NAME="e-mail" CONTENT="[email protected]"> <META NAME=”copyright” CONTENT=”2003, Burlartny Associates”> Veremos alguns exemplos de <meta> tags: 1.1. Refresh O uso do “refresh” é muito útil em várias ocasiões em que se deseja redirecionar o internauta para outra página sem que este necessite clicar em nada para que isto ocorra. O “refresh” também pode ser usado para fazer slide show de fotos. Abrindo uma url nova em um determinado período. Exemplo: Documento foto1.html contém: <META HTTP-EQUIV="refresh" CONTENT="4;URL=foto2.htm"> que significa que em 4 segundos o arquivo foto2.htm será aberto. O documento foto2.html contém: <META HTTP-EQUIV="refresh" CONTENT="4;URL=foto3.htm"> O documento foto3.html contém: <META HTTP-EQUIV="refresh" CONTENT="4;URL=foto4.htm"> Também pode ser usado no Netscape 5+ e no Internet Explorer 5+ para adicionar um áudio automaticamente na página: <meta http-equiv=”refresh” content=”1;URL=”audio/musica.mid”> Note que desta maneira o usuário não tem controle sobre o som e se um arquivo áudio for muito grande, o tempo de download é equivalentemente grande. 19 WEB / INTERNET 1.2. Definir o idioma Usado para identificar a língua na qual o documento foi escrito. Exemplo de um documento escrito em francês: <META HTTP-EQUIV=”content-language” CONTENT=”fr”> Em português seria: “pt” Em inglês: “en” Em espanhol: “es” 1.3. Transição de páginas Este <meta> tag funciona somente com Internet Explorer e é designado para criar efeitos de transição de uma página à outra. Existem cerca de 24 efeitos que podem ser aplicados tanto ao entrar numa página, quanto ao sair. Exemplo: <META HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans(Duration=2,Transition=21)"> onde “Page-Exit” significa que o evento ocorrerá ao sair da página, poderia ser “Page-Enter”, a duração da transição é de 2 segundos e o número da transição 21 – que cria o efeito de barras horizontais. 1.4. Classificação Para classificar o conteúdo de uma web page indicando se é ou não apropriada para crianças, existem quatro possibilidades: general, mature, restricted, 14 years. <META NAME=”rating” CONTENT=’general’> <META HTTP-EQUIV ="cache-control" content="public" /> 1.5. Descrição da página É um dos dois tags que os mecanismos de busca olham quando estão indexando as páginas do seu website. Normalmente a descrição contida no <meta name="description”> é exibida junto com o título da página. Esta descrição deve conter cerca de 20 palavras. Exemplo: <META NAME="description" CONTENT="Especializado em esportes de aventura e ecoturismo em Sao Paulo> 1.6. Palavras-chave As palvaras-chave contidas no <meta name=”keywords”> são usadas pelos mecanismos de busca para categorizar o seu website. Similar à descrição, os sites de busca dão prioridades às primeiras palavras usadas. Exemplo: <META NAME="keywords" CONTENT="viagem, ecoturismo, aventura, esporte, radical, sao paulo, eco turismo, campos do jordao, ilhabela"> 20 WEB / INTERNET 1.7. Revisitar Usado para definir qual a frequência os mecanismos de busca devem vir ao seu site e re-indexar. Normalmente este tag é usado por websites que mudam o seu conteúdo com frequência e periodicamente. Exemplo: <META NAME="revisit-after" CONTENT="30 days"> Referências Bibliográficas: Lynda Weinman, <designing web graphics. 4>. New Riders Publishing, 2003 Jennifer Niederst – Web Design in a Nutshell , Second Edition. O’Reilly & Associates, 2001 Site: http://www.w3.org/ 21
