Projeto e Criação de Páginas de Web

Transcrição

1 Programa do Curso Projeto e Criação de Páginas de Web João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) Fax. (021) joao@nce.ufrj.br Material Notas de Aula Página do Curso Listas de Exercício e Soluções Avaliação Prova (de 0 a 10) Trabalho (de 0 a 30% da nota da prova) Nota Final = Prova + ( 1 + (Trabalho / 100) ) Primeira Versão dos Slides: Maurício Bonfim Referências de HTML Bibliográficas: Aprenda em uma semana HTML 4 Laura Lemay, Editora Campus Home pages: recursos e técnicas para criação de páginas WWW Andreia Alcântara e etc, Editora Campus HTML Dinâmico Ramalho, Editora Berkeley Na Internet: Em português Documentação da W3C Documentação do Netscape World Wide Web Definição: rede global de hiperdocumentos Desenvolvido no CERN Final da década de 80. Acesso a documentos espalhados pela rede, independente de sua localização. Características Tecnologia de hipermídia (Hipertextos) Apresentação gráfica e multimídia da informação Independente de plataforma Distribuido, dinâmico e interativo. Cliente-servidor Navegadores (Browsers) Acessar vários sites: navegar. Para navegar é necessário um software cliente Ele é responsável por: Solicitar documentos na Internet Interpreta-los, exibindo-os para o usuário Exemplos: Netscape, Internet Explorer, Mosaic, Lynx Servidores (Web Servers) São os programas capazes de disponibilizar informações na Web. Exemplos: Em ambiente UNIX: NCSA CERN Apache Em ambiente Windows: PWS IIS Netscape WebSite. 1

2 HTML Hypertext Markup Language URL (Uniform Resource Locator) Permite localizar um objeto na Internet É uma linguagem de marcação usada na formatação de documentos na Web. É interpretada pelo browser. Descreve o documento independente da plataforma de visualização. Portabilidade X Dificuldade de diagramação. Formato de endereçamento protocolo://servidor/diretório/arquivo Protocolo: nomalmente http http - Hypertext Transfer Protocol Outros protocolos: telnet, ftp, etc Home Pages Documento projetado para ser a página principal de um site. Objetivo básico: Direcionamento do usuário para outros documentos relacionados. Deve ter referências (links) às outras páginas do site Editores de HTML Servem para facilitar o processo de criação de páginas Existem inúmeras opções no mercado: Filtros conversores: Rtftohtml Pstohtml Editores de tags: HTML Assistant HotDog W3e Editores Wysiwyg: Netscape Composer FrontPage Express Gerenciadores de site: FrontPage AOLPress Macromedia Dreamweaver Características Gerais de HTML Como é um documento HTML? Arquivo ASCII. Texto corrido, ignora caracteres especiais como TAB, CR, LF. Marcações (tags) usam < e >. Empty tags e Container tags. Marcações podem ser aninhadas. Maiúsculas X Minúsculas. Comentários: <! >. Padronização pela W3C Versão atual HTML 4.01 Características Gerais de HTML Estrutura do documento: <html> < head> <title> </title> </head> <body>... </body> </html> 2

3 Características Gerais de HTML A estrutura padrão deve ser respeitada Apesar disso, é possível que o navegador exiba um texto, mesmo que ele esteja fora das áreas padrão Exemplo Formatação Básica Estilos físicos <b> Negrito </b> <i> Itálico </i> <u> Sublinhado </u> <tt> Mono-espaçado </tt> <sub> Sub-escrito </sub> <sup> Sobre-escrito </sup> Estilos lógicos <strong> Ênfase </strong> <em> Ênfase </em> <cite> Citação </cite> <code> Código fonte </code> Separadores Separadores <p> - Inicio de parágrafo. <br> - Quebra de linha. <hr> - Linha horizontal. Algumas tags podem receber atributos que modificam a sua apresentação. Atributos da tag <hr> size = n width = n width = n % noshade Cabeçalhos e Texto Pré-formatado Cabeçalhos <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Texto Pré-formatado <pre> </pre> Outro exemplo... Alinhamento Básico Única forma de alinhamento até o HTML 4.0. Deve desaparecer em versões futuras. Caracteres Especiais Acentuação, em ambiente Windows, é produzida diretamente (norma ISO Latin 1). Codificação em HTML Alinhamento de Texto <P align=right> <H1 align=left> <DIV align=justify> á á ã ã â â à à ç ç Outros... < < > > & & " 3

4 Listas não numeradas Listas não numeradas <ul> <li> Correio Eletrônico </li> <li> Telnet </li> <li> Ftp </li> </ul> Lista Aninhadas Atributos de <ul> e de <li> type = circle, square ou disc Listas numeradas Listas Numeradas <ol> <li> Correio eletrônico </li> <li> Telnet </li> <li> Ftp </li> </ol> Listas Aninhadas Atributos de <ol> type A a I (romanos maiúsculo) i (romano minúsculo) 1 (default) start Valor inicial da numeração Atributo de <li> type No explorer: só vale para a tag <li> onde é definido. No Netscape: Vale também para as seguintes. value Valor inicial da numeração. Listas de definição Verbete de dicionário Telnet É o protocolo mais usado na Internet para criar uma conexão com um nó remoto. FTP O "File Transfer Protocol" é o principal método de se transferir arquivos pela Internet. Listas de definição <dl> <dt>telnet</dt> <dd>é O Protocolo Mais Usado Na Internet Para Criar Uma Conexão Com Um Nó Remoto.</dd> <dt>ftp</dt> <dd>o "file transfer protocol" é o principal método de se transferir arquivos pela internet. </dd> </dl> 4

5 Interligando Documentos Desviando para outro documento: <a href="url destino">texto</a> Observações: Caminhos relativos X absolutos. Barras de diretórios: usar "/" em lugar de "\. Dentro de URLs, maiúscula é diferente de minúscula. URL destino pode ser: outro documento, uma imagem, uma música, etc. Referências Internas Interligando seções em uma página Definição de uma seção: <a name="seção">... </a> Link para uma seção da mesma página: <a href="#seção">... </a> Link para uma seção de outra página <a href="arquivo#seção">... </a> Enviando Mensagens Enviando mensagens de correio eletrônico <a href="mailto:fulano@local">...</a> Quando o link for acionado, o programa de correio eletrônico do navegador é aberto, permitindo que o usuário envie uma mensagem para o endereço especificado. Transferência de Arquivos Transferência de arquivos via FTP <a href= ftp://ftp.nce.ufrj.br/pub/arq.zip">...</a> Quando o link for acionado, o arquivo é transferido utilizando o protocolo do FTP que, neste caso, é mais eficiente que o HTTP. Imagem e Som Arquivos de Imagem <a href= imagem.jpg">...</a> Quando o link for acionado, o arquivo de imagem será exibido na janela do navegador. Arquivos de Som <a href= musica.wav">...</a> Quando o link for acionado, o navegador acionará o pluggin para tocar a música. Incluindo Imagens Imagens embutidas num documento <img src= url da imagem > Podem ser gif, jpg ou png. Atributos da tag: alt = Texto alternativo mostrado no lugar da imagem. align = top / bottom / middle / left / right border = Largura da borda quando usada como âncora. width = Largura em pixels. height = Altura em pixels. vspace = Espaço vertical ao redor da imagem. hspace = Espaco horizontal ao redor da imagem. 5

6 Links e Fundos de Página Usando imagens como links: <a href= link.htm ><img src= x.gif ></a> Imagem de fundo da página Mural Ladrilho <body background= imagem > Especificação de Cores Uma cor pode ser identificada por: Nome em inglês. Código RGB. Formato RGB Pelo RGB é possível especificar qualquer cor. Formato: #RRGGBB Dois dígitos Hexadecimais para cada valor. Algumas Cores Exemplos: White ou #FFFFFF Red ou #FF0000 Green ou #00FF00 Coral ou #FF7F00 Yellow ou #FFFF00 Gray ou #C0C0C0 etc Atributos de cor em <body> Deve desaparecer em versões futuras. Cores do documento: bgcolor - Cor de fundo. text Cor do texto. Cor de links: link Ainda não visitados. alink Quando estão sendo acionados. vlink Já visitados. Fontes e cores de caracteres Deve desaparecer em versões futuras. Escolhendo Fontes e Cores de Caracteres <font >.... size = [+ ou -] número de 1 a 7 face = fonte1, fonte2, color = cor do texto </font> GIF x JPG GIF x JPG Ambos compactam a imagem, porém com algoritmos diferentes. GIF - Graphics Interchange Format Compuserv Codificação LZW Imagens com cores lisas, que utilizam até 256 cores JPG ou JPEG - Joint Photographers Expert Group Criado para armazenar fotografias Transformações matemáticas Imagens com: grandes variações de cor ou de tonalidade 6

7 Formato Gif 89a Gif entrelaçado Carregamento da figura é feito em 4 partes Permite ter uma idéia da imagem antes do carregamento completo Gif Transparente É possível indicar uma cor de fundo que não é pintada. No lugar da cor de fundo aparece o fundo da janela do navegador. Manipulação de imagens Qualquer programa de edição de imagens pode ser usado. Exemplos: Photoshop Corel Draw Lview PaintShop Pro Outros Imagens para Web Bibliotecas de ícones/clipart: Galerias de clipart: Mapas Clicáveis Ativação de links pela seleção de uma parte de uma imagem Imagem dividida em regiões: Retangulares Circulares Poligonais Regiões são definidas por um conjunto de coordenadas Implementações: Server Side Maps Client Side Maps Server Side Maps Um browser que possa determinar a coordenada da figura que foi selecionada. Um programa no servidor para receber esta coordenada e identificar a região da figura e seu link associado. Um arquivo localizado no servidor associado a cada figura, indicando as regiões e seus links. Server Side Maps - Problemas O formato do arquivo é dependente do servidor. Uma comunicação a mais entre o cliente e o servidor para determinar o link selecionado. O usuário não sabe a priori para onde aponta o link que selecionou. Necessita a intervenção do administrador do servidor para criar e modificar o arquivo. 7

8 Client Side Maps Todas informações estão no documento HTML. Figura do Mapa: <img src=figura usemap= #Nome_Mapa > Conjunto de Regiões do Mapa: <map name= Nome_Mapa >... Regiões... </map> Client Side Maps Definição de uma região: <area shape= tipo de região coords= lista de coordenadas href= url associada alt= texto alternativo > Tipos de Região: rect circle polygon Lista de Coordenadas - CIRCLE Centro do Círculo e raio coords= 70, 80, 30 70, 80 Lista de Coordenadas - RECT Canto superior esquerdo e canto inferior direito. coords= 20, 70, 100, , , 110 Lista de Coordenadas - POLYGON Lista de coordenadas de cada vértice coords= 20, 80, 60, 10, 100, 80 60, 10 20, , 80 Client Side Maps - Exemplo <MAP NAME="mainmap"> <AREA SHAPE=CIRCLE COORDS="50,50,25" HREF=" > <AREA SHAPE=RECT COORDS="50,50,100,100" HREF=" > <AREA SHAPE=POLYGON COORDS="0,0,50,100,100,0" HREF=" > </MAP> <IMG SRC="images/shapes.gif" WIDTH=100 HEIGHT=100 ALT="shapes" USEMAP="#mainmap"> 8

9 Determinação das regiões Programas para determinar as coordenadas das regiões: Informação para Sites de Busca É possível definir: Descrição da página Palavras chave <head> <title>minha Home Page</title> <meta name= description content= Esta é a descrição da minha página > <meta name= keywords content= Fotografia, programação, poesia > </head> Troca automática de Página Aplicações: Redirecionamento. Apresentação de Slides. Atualização de imagem. Formato tempo em ms; url=endereço da nova página. Multimidia Exigem que o usuário possua um programa externo/pluggin Formatos de áudio: wav, au, mp3, mid, ra, etc. <meta http-equiv="refresh content="10;url=nova.html"> Formatos de vídeo: avi, mov, mpeg, etc. Inserindo Áudio e Vídeo Inserindo áudio e vídeo: Através de links: <A HREF= xmas.wav >link p/ música</a> <A HREF= filme.avi >link p/ filme</a> Embutidos no documento Tags particulares do Internet Explorer Áudio e vídeo Embutidos <embed src= url atributos> Atributos desejáveis para Som: hidden (True, False) AutoStart (True, False) loop (numero) Atributos desejáveis para Vídeo: AutoStart (True, False) loop (numero) alt, hspace, vspace, align, width e height 9

10 Tags dependentes do navegador Áudio e vídeo no Internet Explorer: <IMG DYNSRC= x.avi SRC= imagem alternativa > <BGSOUND SRC= x.wav > Animações dependentes do Navegador <marquee>... </marquee> (Explorer) Permite criar letreiro de texto rolável <blink>... </blink> (Netscape) Texto piscando na tela Animações Exemplos: GIFs Animados Composição de várias imagens em sequência num único arquivo GIF Montagem é feita com um programa a parte. Ex: Gifcon HTML Dinâmico Só funciona nos browsers 4.x Controle sobre posição dos elementos através de uma linguagem de script Animações em JAVA São produzidas por um programa (applet) Pode usar uma applet pronta fornecida pela Sun Tabelas Exibição de informação organizada por linhas e colunas. Interseção de uma linha com uma coluna é uma célula. A definição de uma tabela é feita linha a linha Para cada linha são definidas todas as células daquela linha. Definindo Tabelas Definição da tabela em si: <table>... </table> Definição dos elementos da tabela: <caption>... </caption> - Legenda. <tr>... </tr> - Linha. <th>... </th> - Célula de cabeçalho. <td>... </td> - Célula. Atributos de Tabela Atributos: border = largura da borda em pixels width = largura da tabela Espaçamento cellspacing = espaço entre as células cellpadding = espaço entre o texto e as bordas Atributos de Células e Linhas Atributos: rowspan - n o de linhas ocupadas pela célula colspan - n o de colunas ocupadas pela célula Alinhamento valign - vertical (top, middle ou bottom) align - horizontal (left, center ou right) width e height - dimensões da coluna 10

11 Cores e Fundo Podem ser definidos nas tags: <table> <tr> <td> bgcolor Problema do Netscape background Problema do Netscape Tabelas e Imagens É possível dividir uma imagem em vários pedaços e posicioná-los usando uma tabela. É uma forma de criar um mapa clicável com áreas retangulares. A soma do tamanho das imagens normalmente é maior que o tamanho da imagem original. Exemplo Arquivo de Layout Define a divisão da tela em frames Tag <frameset> no lugar de <body> <html> <head> </head> <frameset > <frame src= url > <frame src= url > </frameset> </html> Disposição e tamanho do Frames Frames podem estar dispostos em linhas ou colunas. Atributos rows e cols de frameset indicam como os frames serão dispostos. Estes atributos devem estar associados a um conjunto de valores separados por vírgulas. Deve haver um valor para cada frame do frameset Os valores são associados aos frames pela ordem de aparecimento no arquivo. Cada valor indica o tamanho do respectivo frame. Tamanho do Frames Forma absoluta: Número de pixels (valor numérico simples). Forma relativa: Porcentagem do tamanho total da janela (número acompanhado do caracter %). Todo o resto do tamanho da janela (caracter *). Exemplos: Frame de 100 pixels e outro de 200: COLS= 100, 200 Frame de 40 pixels e outro de ocupando 50% da janela: COLS= 40, 50% Frame de 80 pixels e outros dois dividindo o resto da janela: COLS= 80, *, * Atributos de frameset Atributos de frameset: cols = 200,* rows = 30%,* frameborder = 0 1 border bordercolor Framesets aninhados Colunas dentro de linhas Linhas dentro de colunas 11

12 Atributos de Frame Devem sempre estar presentes: src name Outros atributos: noresize scrolling = YES, NO ou AUTO marginheight e marginwidth Navegadores Antigos Compatibilizando o documento com navegadores que não utilizam frames: <html> <frameset > <frame src= url > <frame src= url > </frameset> <noframes>... Documento alternativo... </noframes> </html> Abrindo Links em Frames Abrindo documentos em frames: <a href= url da pagina target= nome do frame > Target default para o documento: <base target= nome do frame > Nomes especiais: _blank - Página em branco _self - No próprio frame do link. _parent - No frame do arquivo de layout. _top - Ocupando a janela toda Formulários Forma de enviar informações para o servidor. Um formulário é composto de elementos de interação com o usuário. A cada elemento deve ser atribuído um nome que terá um valor associado pelo usuário. A informação é enviada na forma de pares do tipo: nome = valor. Criando um formulário Tag <form>... </form> Atributos de form: method - Forma de envio do formulário ao servidor. Pode receber o valor post ou get. action - URL do programa que será executado no servidor que receberá os dados do formulário. <form method=post action= /cgi-bin/prog.pl >... Elementos de interação do fomulário... </form> Envio de Formulário por Colocar no atributo action uma URL no formato: mailto:nome@sevidor Método tem que ser post. <form method=post action= mailto:joao@nce.ufrj.br >... Elementos de interação do fomulário... </form> 12

13 Elementos de Interação Os elementos de interação podem ser: Campos de entrada linha de texto e senha. Botões do tipo sim/não (Checkbox). Grupos de botões de rádio (Radio Buttons). Listas de seleção (Drop-Down Lists). Áreas de entrada de texto (multiplas linhas). Botões simples. A tag <input> Serve para criar vários elementos de interação: Campos de entrada de linha de texto. Campos de entrada de senha. Botões sim/não. Botões de rádio. Botões simples. O atributo type é obrigatório e determina o tipo do elemento. Linha de texto e senha <input type=text atributos> <input type=password atributos> Atributos: name - Identificação do elemento. size - Tamanho do campo em caracteres. maxlength - Máximo de caracteres a ler. value - Valor inicial do campo. Nome: <input type=text size=40><br> Senha: <input type=password size=8 maxlength=8> Botões Sim ou Não <input type=checkbox atributos> Atributos: name - Identificação do elemento. value - Valor associado ao campo. checked - Caixa está inicialmente marcada. Áreas de interesse: <br> <input type=checkbox name=b1>redes<br> <input type=checkbox name=b2>bancos de dados<br> Botões de Rádio <input type=radio atributos> Atributos: name - Identificação do grupo de botões. value - Valor associado ao campo. checked - Botão inicialmente selecionado. Botões pertencentes ao mesmo grupo tem que ter o mesmo valor no atributo name. sexo: <input type=radio name=sexo value=m>masculino <input type=radio name=sexo value=f>feminino Área de Entrada de Texto <textarea>... </textarea> Atributos: name - Identificação do grupo de botões. cols rows - Largura em caracteres. - Altura em linhas. Comentários:<br> <textarea name=texto rows=3 cols=40>... Digite aqui um texto qualquer... </textarea> 13

14 Listas de Seleção Definidas pela tag <select>... </select> Há uma tag <option>... </option> para cada elemento da lista. <select> <option>...</option> <option>...</option> <option>...</option> </select> Atributos de <select> e <option> Atributos do <select> name - Identificação do elemento. size - Número de opções visíveis. multiple - Lista de seleção múltipla. Atributos do <option> value - Valor associado a opção. selected - Opção inicialmente selecionada. sexo: <select name=sexo> <option value=m selected>masculino</option> <option value=f>feminino</option> </select> Botões Simples <input type=button value= texto > <input type=image src= img.gif > Atributos: name - Identificação do botão. value - Texto que aparece no type=button. src - Imagem que aparece no type=image. Botões sem ação padrão associada. Só tem utilidade quando associados a algum código em Javascript. Envio e Limpeza de Formulário <input type=submit value= Envia > <input type=reset value= Limpa > São botões que tem uma ação padrão associada a sua seleção. A seleção do botão do tipo submit causa o envio do formulário. A seleção do botão do tipo reset causa a limpeza do formulário, fazendo com que todos os campos voltem ao valor inicial. Folhas de Estilo Cascade Style Sheets (CSS). Separa aparência e estrutura do documento. A partir da versão 4 do Explorer e do Netscape. Devem estar na seção <HEAD> do documento.  Sintaxe /* comentário */ seletor { propriedade: valor; propriedade: valor valor valor...;... } seletor, seletor { propriedade: valor;... } 14

15 Propriedades dos Estilos Fonte color, font-family, font-size, font-style, font-weight, text-decoration Cor e imagem de fundo background-position, background-image, background-color, background-attachment, background-repeat Alinhamento de texto text-align, text-indent, vertical-align Espaçamento word-spacing, letter-spacing, line-height, margin, padding, white-space Valores Possíveis (I) Palavras Chave Dimensão (small - pequeno) Relação (bolder - mais escuro) Fonte de caracteres (arial, times, etc). Tamanho Valor seguido da unidade (pt, px, in, cm, mm) Percentuais Valor numérico seguido do simbolo % Valores Possíveis (II) URLs Sintaxe url(endereço): url( url(foto.jpg) Cores Nome (yellow, blue, black). Valor RGB (#RRGGBB - nunca entre aspas) Sintaxe rgb(r, g, b) rgb(125, 100, 70) rgb(50%, 50%, 20%) Seletor Múltiplo h1, h2 { color: blue; } Todos os cabeçalhos H1 e H2 serão azuis. Seletor Contextual h1 i { color: black; } Textos em itálico dentro de cabeçalhos H1 terão a cor preta. Compartilhando estilos Arquivo com extensão css. Uniformização das páginas de um site. <link rel=stylesheet type= text/css href= arquivo.css > 15

16 Classes de estilo Permite criar diferentes estilos para uma tag. Mudando a definição, a apresentação é alterada. h1 { font-family: arial; font-size: 20pt; } h1.vermelho { color: red; } h1.verde { color: green; } Estas classes só podem ser aplicadas a tag <h1> Utilização: <h1 class=vermelho>cabeçalho Vermelho</h1> <h1 class=verde>cabeçalho Verde</h1> <h1 class=vermelho>outro Cabeçalho Vermelho</h1> Classes Genéricas É possível criar classes aplicáveis a qualquer tag, basta omitir o nome da tag no seletor..verde { } color: green; Utilização: <h1 class=verde>este é um cabeçalho verde</h1> <p class=verde>este é um texto verde Pseudo-classes Classes com nomes pré-definidos. Associadas a estados assumidos por algumas tags. Tag A: link, active, visited e hover (só explorer) A:link { color: blue; } A:active { color: red; font-weight: bold; } A:visited { color: green; } A:hover { color: darkred; } Identificadores Permite a redefinição de uma ou mais características de uma classe. Tem precedência sobre class. Só deve ser utilizada em uma única tag. h1.grande { font-family: arial; font-size: x-large; color: green; } #azul { color: blue; } #amarelo { color: yellow; } Utilização: <H1 class=grande>grande e verde</h1> <H1 class=grande id=azul>grande e azul</h1> <H1 class=grande id=amarelo>grande e amarelo</h1> Estilos inline Atributo style de qualquer tag. Tem precedência sobre id e class. h1.grande { font-family: arial; font-size: xx-large; color: green; } #azul { font-size: x-large; color: blue; } Utilização: <h1 class=grande>muito grande e verde</h1> <h1 class=grande id=azul style= font-family: times; color: red; > Grande, verde e com fonte times</h1> Tags div e span Permitem atribuir um estilo a um pedaço de um documento (aceitam atributos class, id e style). Tag <DIV>... </DIV> Causa uma mudança de linha. Pode conter vários parágrafos. Tag <SPAN>... </SPAN> Não causa mudança de linha. Definir um estilo no meio do parágrafo. <div style= color: red; >Este é um parágrafo vermelho com um texto <span style= color: green; >verde</span> no meio</div> 16