HTML 1 HTML. Servidor HTTP

Transcrição

1 HTML 1 HTML Páginas Web são criadas com a linguagem HTML (HyperText Markup Language), a qual permite misturar texto normal com marcas (tags) que descrevem o texto. As marcas podem descrever a aparência (cor, tamanho de letra,...) ou o posicionamento do texto (em listas, tabelas,...) mas algumas descrevem apenas o conteúdo (cabeçalho principal,...) ficando a decisão da aparência e do posicionamento para o navegador (browser). Servidor HTTP Para publicar um documento na WWW (World Wide Web) é necessário criar um documento HTML e colocá-lo numa localização acessível via Web. Para ser acessível a outros utilizadores da Internet, o documento necessita de ser colocado num computador ligado á Internet e que tenha um servidor HTTP a correr. HTTP (HyperText Transfer Protocol) é o protoclo pelo qual os clientes WWW, os quais são na maior parte dos casos navegadores (browsers), comunicam com os sistemas que contêm as páginas Web. O programa que responde aos pedidos de ficheiros efectuados pelos clientes é o servidor HTTP (também designado por servidor Web). Este programa traduz o URL (Uniform Resource Locator, que é o endereço Web) especificado pelo cliente, num nome de um ficheiro específico do sistema do servidor. Em geral o servidor procura o ficheiro num subdirectório, tal como www ou public_html, não listado no URL mas que faz parte da localização real do ficheiro. Este mapeamento entre URLs e directórios reais no sistema do servidor é configurável pelo administardor do servidor. Para a maior parte dos servidores HTTP existem nomes de ficheiros por omissão que são usados se o URL especifica um directório e não um nome de ficheiro, tais como index.html ou default.html e variações terminando em htm. Editores de HTML Um documento HTML é formado por texto ASCII normal, pelo que pode ser criado com um editor de texto como o Notepad ou com um editor de HTML como o FrontPage, ou ainda usando um utilitário que converta um documento de um processador de texto para HTML tal como o Microsoft Word. Como HTML é uma linguagem de marcas a conversão automática de um documento de um processador de texto em HTML resulta muitas vezes numa página Web que difere da original e necessita de alguns ajustes. Estrutura de um Documento HTML Um documento HTML é constituído por elementos HTML identificados por marcas (tags). As marcas são incluídas entre os sinais menor (<) e maior (>) e servem para fornecer informação descritiva ao browser não sendo mostradas na página Web resultante. Exemplo: <title>página Web</title>

2 2 HTML Os elementos HTML também pode ter atributos para fornecer informação adicional expressa sob a forma atributo=valor. Exemplo: <img src= imagens/imagem1 > Valores de atributos que incluem caracteres não alfanuméricos, como no exemplo acima, obrigam a colocar dentro de aspas esses valores. Portanto uma prática segura é incluir sempre os valores dentro de aspas, a não ser que seja um inteiro. Todos os elementos HTML e nomes de atributos podem ser escritos com maiúsculas ou minúsculas (case insensitive), o mesmo não se verificando para os valores dos atributos. Alguns elementos são contentores possuindo uma marca de início e a correspondente marca de fim, como o exemplo do elemento title mostrado acima. Outros elementos têm uma única marca, como o elemento img. Se um browser não reconhece um dado elemento HTML ou atributo, o browser ignora os tags mas não o texto normal entre os tags, o qual é mostrado. Comentários HTML são incluídos entre <!-- e --> e podem estender-se por várias linhas mas não devem conter um duplo hifen (--) no corpo do comentário. Os documentos HTML devem começar por uma declaração DOCTYPE que identifica a versão da página HTML seguida do elemento html que contem um elemento head e um elemento body. Em seguida apresenta-se um template do qual é útil ter uma cópia para inserir em documentos novos HTML (excepto para documentos que usem frames). Em rigor só a declaração DOCTYPE e o elemento title são obrigatórios. <!-- Template de página HTML > <!-- Recomendado como ponto de partida --> <!-- para construir um documento HTML --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>título</title> </head> <body> <h1>título Principal</h1> </body> </html> <!-- Resto da página deve ser colocado aqui --> Ficheiro HTML-Template.html Para verificar que o documento não tem erros de sintaxe pode-se submeter o respectivo URL a um validador on-line (

3 HTML 3 Elemento head Este elemento contem informação de alto nível acerca da página. Muitas vezes contem um único elemento title, o qual é obrigatório, mas pode conter mais elementos. Vamos apresentar 3 elementos opcionais que podem estar contidos no elemento head: meta, script, e style. Elemento meta <meta... > (sem tag final) name, content (obrigatório), http-equiv, scheme. O elemento meta pode servir para registar informação relativa a todo o documento, redirigir ou refrescar páginas, e ainda incluir ficheiros de som. O registo de informação relativa ao documento é efectuado através do par name e content, onde name identifica o nome de uma propriedade e content o seu valor. Atributo name e content: Exemplo 1: Propriedade keywords cujo valor são palavras-chave descritivas do documento separadas por vírgulas, usadas por motores de busca tais como Google e Lycos. <head> <title>documento HTML</title> <meta name="keywords" content="web, Servidor HTTP, Elementos HTML"> </head> Atributo scheme: O atributo scheme define o formato do valor de uma propriedade associada a um par name-content também do elemento meta. Exemplo 2: Propriedade Data em que o formato do valor é definido pelo atributo scheme. <head> <title>documento HTML</title> <meta scheme= Ano-Mês-Dia name="data" content=" "> </head>

4 4 HTML Atributo http-equiv: O atributo http-equiv serve para redirigir ou refrescar páginas, e ainda incluir ficheiros de som. Exemplo 3: Página que é carregada automaticamente de 2 em 2 segundos <!-- Página carregada automaticamente de 2 em 2 segundos --> <head> <title>automatic Reloading - cada 2 segundos</title> <meta http-equiv="refresh" content="2"> </head> <body> <h1>automatic Reloading - cada 2 segundos</h1> </body> Ficheiro Automatic-Reload.html Exemplo 4: Página que redirige automaticamente para um novo URL ao fim de 5 segundos. <!-- Redirecção automática ao fim de 5 segundos --> <head> <title>redirecção automática ao fim de 5 segundos</title> <meta http-equiv="refresh" content="5; url=automatic- Reload.html"> </head> <body> Ficheiro Forwarding.html <h1>redirecção Automática ao fim de 5 segundos</h1> </body>

5 HTML 5 Exemplo 5: Página que carrega um ficheiro de som ao fim de 3 segundos. <! Executa automaticamente um ficheiro de som ao fim de 3 segundos --> <head> <title>sinfonia N.º 9 de Beethoven (Scherzo)</title> <meta http-equiv="refresh" content="3; url=sinfonia N.º 9 de Beethoven (Scherzo).wma"> </head> <body> <h1>sinfonia N.º 9 de Beethoven (Scherzo) ao fim de 3 segundos</h1> </body> Ficheiro musica.html

6 6 HTML Elemento script <script type= >... </script> language, src, type (obrigatório), charset, defer Este elemento é usado para embeber programas em JavaScipt ou noutra linguagem. Elemento style <style type= >... </style> type (obrigatório), title, media Este elemento é usado para especificar folhas de estilo em cascata (cascade style sheets) úteis para conter detalhes acerca de fontes, cores margens e outras características usadas para vários elementos do documento.

7 HTML 7 Elemento body Os documentos HTML devem ter apenas um elemento body excepto se são constituídos por frames. Como o elemento title contido no elemento head aparece na barra de título da janela mas não na página, o elemento body normalmente começa com um título usando o cabeçalho de maior tamanho (h1), muitas vezes com o mesmo texto que o elemento title. O elemento body é muitas vezes usado sem atributos (simplesmente <body>) mas pode opcionalmente conter atributos especificando a cor de fundo (bgcolor), imagem de fundo (background), a cor de foreground usada no texto normal (text), etc. Exemplo 6: Página com cor de fundo e cor de texto. <! Página com cor de fundo e cor de texto --> <head> <title> Página com cor de fundo e cor de texto </title> </head> <body bgcolor= yellow text= red > <h1> Página com cor de fundo e cor de texto</h1> </body> Ficheiro cordefundo.html

8 8 HTML Exemplo 7: Página com imagem de fundo e cor de texto. <! Página com imagem de fundo e cor de texto --> <head> <title>página com imagem de fundo e cor de texto</title> </head> <body background="pôr do sol.jpg" text="white"> <h1>página com imagem de fundo e cor de texto</h1> </body> Ficheiro imagemdefundo.html Podemos distinguir 2 tipos de elementos que podem aparecer na porção body de um documento html: Elementos de nível texto, que apenas definem aparência de texto. Elementos de nível bloco de texto, que definem como blocos de texto são formatados e mostrados.

9 HTML 9 Elementos de nível texto Elemento b bold <b>... </b> Elemento i italic <i>... </i> Elemento u underline <u>... </u> Elemento sub subscript _... Elemento sup superscript ^... Elemento em emphasize <em>... </em> Elemento strong <strong>... </strong> O elemento sub coloca o texto incluído como subscript, o elemento sup coloca o texto incluído como superscript, o elemento em enfatiza o texto incluído, normalmente em itálico, e o elemento strong enfatiza fortemente o texto incluído, normalmente em bold. Elemento font <font >... </font> Size, color, face. Este elemento define o tamanho ou cor do texto incluído. O atributo size determina o tamanho da fonte e pode ter um valor de 1 (mais pequeno) a 7 (maior), ou um valor relativo à fonte actual (por exemplo size = +2 ). O atributo color especifica a cor do texto incluído. O atributo face permite especificar uma lista de nomes de fontes, separadas por vírgulas, indicativas da ordem de preferência da fonte a usar na máquina cliente. Elemento span <span >... </span> class, id, style. O elemento span é usado para suportar folhas de estilo em cascata (cascading style sheets ccs), delimitando o texto ao qual é aplicado o estilo definido pelo utilizador. O comportamento por omissão é deixar o texto inalterado.

10 10 HTML Elemento a - anchor <a >... </a> href, name, target. O elemento âncora a permite especificar secções de texto ou imagens que, quando seleccionadas pelo utilizador, transferem o browser para uma secção específica de um determinado documento. O elemento âncora a também permite dar um nome a uma secção de um documento para que outros links se possam referir a essa secção. Num elemento a com href a secção incluída no lemento a (texto ou imagem) torna-se uma região clicável na página resultante. Essa região apresenta-se normalmente sublinhada na cor usada por omissão para os links, azul. Links que já foram visitados na sessão corrente apresentam-se também sublinhados mas noutra cor. O atributo href (hardware reference) especifica o endereço que o browser deve visitar quando o utilizador clica na região correspondente. O valor pode ser: um URL absoluto Exemplo: <a href= >Especificação de html oficial</a>) um URL relativo Exemplo: <a href= >exemplo 1</a>) ou um sinal cardinal (#) seguido de um nome de uma secção Exemplo: <a href= #Secção 5 >Secção 5</a>) ou um URL seguido do sinal cardinal seguido de nome de secção Exemplo: <a href= 5 >Secção 5</a>). Se uma secção é fornecida, o browser transfere para essa secção do documento especificado, senão transfere para o início do documento. Se o URL especifica um directório deve-se incluir a barra no final. Se se omite a barra no final, o browser faz uma primeira ligação ao servidor HTTP para pedir o ficheiro correspondente ao URL especificado, e uma segunda ligação incluindo uma barra final no URL especificado, desperdiçando deste modo tempo na primeira ligação. O atributo name dá um nome a uma secção para que outros links se possam referir a ela. O atributo target especifica onde o documento referenciado deve ser colocado, se num frame particular, se numa nova janela do browser. Nota: um documento torna-se mais legível quando o texto de um link é descritivo, em vez de a descrição se encontrar antes ou depois do link e o link consistir apenas num texto do género clique aqui. Exemplo: As especificações oficiais de HTML são disponibilizadas on-line pelo <a href= >World Wide Web Consortium (W3C)</a>). Em vez de: <a href= >Clique aqui</a> para ver as especificações oficiais de HTML, disponibilizadas on-line pelo World Wide Web Consort ium (W3C).

11 HTML 11 Elemento img - image <img source= alt= > (sem tag final) source (obrigatório), alt (obrigatório), align, width, height, hspace, vspace, border, usemap, ismap. O elemento img permite inserir imagens num documento. A maior parte dos browsers suportam os formatos GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), e PNG (Portable Network Graphic). O elemento img não é um contentor e por isso não tem tag final. É um elemnto de nível texto e por isso não causa mudança de parágrafo. src especifica a localização do ficheiro de imagem a ser inserido, atrvés de um URL absoluto ou relativo. alt designa a string a ser mostrada em browsers só de texto, ou browsers com gráficos desactivados. width e height especificam o tamanho pretendido para a imagem em pixeis. Fornecendo estes 2 atributos, os brwosers primeiro carregam o texto deixando o espaço necessário para a figura e só depois carregam a imagem sem necessidade de modificar o posicionamneto do resto da página, sendo o resultado para o leitor mais agradável. Se as dimensões são diferentes das dimensões originais a imagem será reduzida ou alargada para se ajustar às dimensões especificadas. align este atributo especifica a posição da imagem realtivamente à linha de texto na qual ela ocorre. Valores possíveis são: left, right, top, bottom (valor por omissão), e middle. Os valores left e right colocam a imagem respectivamente à esquerda ou à direita do texto. Os valores top, bottom e middle referem-se ao alinhamento do texto com a parte de cima, de baixo, ou do meio da imagem. hspace e vspace estes atributos especificam o espaço vazio, em pixeis, à esquerda e à direita (hspace) e em cima e em baixo (vspace) da imagem. Os valores por omissão são 2 pixeis. border largura do bordo a desenhar à volta da imagem. O valor por omissão é 2. usemap especifica o nome de um elemento map. Deste modo a imagem ficará ligada ao elemento map, que define regiões clicáveis e respectivos URLs, passando a constituir uma mapa de imagem (do lado do cliente). O nome do elemento map é especificado como #nomemap (se pertence à mesma página html) ou URL#nomeMap se se encontra noutra página. ismap a ocorrência deste atributo faz com que a imagem seja usada como mapa de imagem do lado do servidor. Só se pode usar o atributo ismap quando a imagem faz parte de um link.

12 12 HTML Elemento marquee <marquee >... </marquee> Width, height, align, behavior, bgcolor, direction, hspace, vspace, loop, scrollamount, scrolldelay. O elemento marquee mostra o texto incluído numa scrolling banner, ou marquee. width e height estes atributos definem a largura e altura da região marquee, quer em pixeis, ou como uma percentagem do tamanho da janela do browser. Os valores por omissão são uma largura de 100% e uma altura dependente da fonte corrente. align especifica como o marquee deve estar alinhado relativamente ao texto que o rodeia. Valores possíveis são left, center, right, top, bottom, e middle. behavior descreve como o texto se move. Valores possíveis são: scroll (valor por omissão) em que o texto se move num sentido até sair do ecrã, repetindo depois; slide, em que o texto se move até atingir um lado, parando em seguida; e bounce, em que o texto alterna de sentido dentro da região definida. bgcolor define a cor de fundo da região. direction especifica o sentido no qual o texto se move, ou do primeiro movimento no caso de behavior= bounce. Valores possíveis são left (da direita para a esquerda, valor por omissão) e right (da esquerda para a direita). hspace e vspace quantidade de espaçamento horizontal e vertica,l em pixeis, à volta da região. loop- quantidadede vezes que o scrolling se repete. O valor -1 ou INFINITE significa repetiçãi indefinida (valor por omissão). scrollamount especifica o número de pixeis entre sucessivos desenhos do texto (quantidade de pixeis de deslocação). scrolldelay especifica o número de milisegundos entre cada sucessivo desenho. Elemento br line break <br> (sem tag final) O elemento br insere um line break sem terminar o parágrafo corrente.

13 HTML 13 Elementos de nível bloco de texto Elemento h - heading <h1... >... </h1> <h2... >... </h2>... <h6... >... </h6> align h1 até h6 são usados para cabeçalhos de documentos sendo h1 o cabeçalho de nível mais alto. Muitas vezes a porção body começa com um cabeçalho de nível 1 contendo o mesmo texto que o elemento title existente no elemento head. Os cabeçalhos são alinhados à esquerda por omissão, mas através do atributo align (valores possíveis: left, center, right, justify) podem ser colocados à esquerda, ao centro, à direita ou ainda para cabeçalhos de tamanho maior que a largura da janela do browser alinhados entre a margem esquerda e a direita. Exemplo 8: Página com cabeçaho de nível 2 centrado. <! Página com cabeçaho de nível 2 centrado --> <head> <title>página com cabeçaho de nível 2 centrado </title> </head> <body> <h2 align= center >Página com cabeçaho de nível 2 centrado </h2> </body> Ficheiro cabeçalho.html Elemento p - paragraph <p... >... </p> (tag final opcional) align

14 14 HTML O elemento p especifica um parágrafo resultando numa secção de texto com algum espaço branco acima e abaixo. O atributo align do elemento p pode ter os valores left, center, right, e justify. Embora o elemento p seja um contentor, o tag final é opcional e neste caso o surgimento de outro elemento de nível bloco de texto implica o fim do parágrafo. Ainda texto que surja dentro do elemento body mas não dentro de qualquer outro elemento de nível bloco é considerado estar dentro de um elemento p. Deste modo, por vezes, o elemento p parece ser um separador de parágrafo, embora realmente seja um contentor de parágrafo, como no exemplo apresentado a seguir. <body> Parágrafo 1 <p> Parágrafo 2 </body> Neste exemplo o elemento p aparece implícito no parágrafo 1 e sem tag final no parágrafo 2. Versão equivalente com elementos p explícitos: <body> <p> Parágrafo 1 </p> <p> Parágrafo 2 </p> </body> Elemento pre preformatted paragraph <pre>... </pre> Normalmente espaço em branco resultante de carriage returns ou múltiplos espaços no documento fonte não é mostrado pelo browser. O elemento pre especifica um parágrafo pré-formatado, que mantém o espaço em branco do documento fonte. Elemento hr horizontal rule <th... >... </th> ( tag final opcional) align, width, size, noshade, color. Este elemento desenha uma linha horizontal ao longo da janela do browser.

15 HTML 15 Listas Ordenadas Elemento ol ordered list Listas <ol... >... </ol> type, start, compact. O elemento ol cria listas ordenadas ou numeradas. O elemento li list item especifica entradas individuais dentro de uma lista. O atributo type especifica o estilo de numeração a usar. Valores possíveis são: 1 - numeração árabe, usada por omissão A - numeração alfabética maiúscula a - numeração alfabética minúscula I - numeração romana maiúscula i - numeração romana minúscula O atributo start é um inteiro que especifica o início da numeração. O atributo compact especifica que a lista deve ser realizada mais compacta. Exemplo: <!-- Listas ordenadas --> <html> <head> <title>listas ordenadas</title> </head> <body> <h1>listas ordenadas</h1> </body> </html> <ol type="i" start=2> <li>parágrafos <li>listas <ol type="a"> <li>ordenadas <li>não ordenadas <li>definição </ol> <li>tabelas </ol> Ficheiro orderedlists.html

16 16 HTML Listas não Ordenadas Elemento ul unordered list, ou bulleted list <ul... >... </ul> type, compact. O elemento ul cria listas não ordenadas. O elemento li list item especifica entradas individuais dentro de uma lista. O atributo type especifica o estilo de bullet a usar. Valores possíveis são: DISC - círculo sólido, usada por omissão CIRCLE - circunferência SQUARE - quadrado Listas de Definições de Termos Elemento dl definition list <dl... >... </dl> compact. Elemento dt definition term <dt>... </dt> (tag final opcional) Elemento dd definition description <dd>... </dd> (tag final opcional)

17 HTML 17 O elemento dl cria lista usadas para definição de termos. Os termos especificados pelo elemento dt têm margens normais e as definições especificadas pelo elemento dd têm margens esquerdas indentadas. <!-- Listas de Definição --> <html> <head> <title>listas de Definição</title> </head> <body> <h1>listas de Definição</h1> <dl> <dt>termo Um <dd>definição do termo um. <dt>termo Dois <dd>definição do termo dois. </dl> </body> </html> Ficheiro definitionlist.html

18 18 HTML Tabelas Elemento table <table... >... </table> border, align, cellspacing, cellpadding, frame, rules, width, bgcolor. As tabelas podem ser usadas quer para apresentar dados sob a forma tabular quer para controlar o posicionamento de grupos de itens realcionados. Tabelas complexas são difíceis de criar escrevendo todo o código html, como no caso de tabelas embutidas noutras ou de entradas que se estendem por várias linhas ou colunas. Para estes casos são úteis os editores de html, que permitem criar as tabelas visualmente. No entanto, muitas vezes, é necessário adicionar algumas características, tais como a cor de fundo, directamente ao código fonte, porque certas funcionalidades não são suportadas pelos editores. Um elemento table pode conter opcionalmente um elemento caption, utilizado para colocar um título para a tabela, seguido de elementos tr (table row), cada um especificando uma linha da tabela. Cada elemento tr pode conter elementos th (table heading) ou elementos td (table data). Os elementos th são realizados com texto bold e centrado enquanto que os elementos td são realizados com texto normal e alinhado à esquerda. Exemplo: <!-- Tabela simples. --> <html> <head> <title>tabela Simples</title> </head> <body> <h1>tabela Simples</h1> </body> </html> <table border=1> <caption>título</caption> <tr><th>cabeçalho 1</th> <th>cabeçalho 2</th></tr> <tr><td>item 1</td> <td>item 2</td></tr> <tr><td>item 3</td> <td>item 4</td></tr> <tr><td>item 5</td> <td>item 6</td></tr> </table> Ficheiro tabela.html

19 HTML 19 border o atributo border controla a largura, em pixeis, do bordo visível à volta da tabela. A ausência deste atributo produz uma tabela sem bordo e sem linhas divisórias entre células. align define o alinhamento horizontal da tabela. Valores possíveis são left (valor por omissão), center e right. cellspacing define o espaço, em pixeis, entre células adjacentes. Este espaço é mostrado como uma linha 3D (valor por omissão igual a 3 pixeis). cellpadding define o espaço vazio em pixeis entre o bordo da célula e os dados da célula. frame especifica que bordos exteriores são desenhados. Por omissão são desenhados os 4 bordos, mas os valores possíveis são: o border, ou box todos, o void nenhum, o above só o de cima, o below só o de baixo, o hsides só os lados horizontais (cima e baixo), o vsides só os lados verticais (esquerdo e direito), o lhs só o lado esquerdo, e o rhs só o lado direito. rules especifica que linhas divisórias interiores são desenhados. Por omissão são todas desenhadas, mas os valores possíveis são: none, all, rows, cols. width especifica a largura da tabela, em pixeis (ex.: <table width=200>) ou como uma percentagem da largura da janela do browser (ex.: <table width= 60% >). bgcolor especifica a cor de fundo da tabela.

20 20 HTML Elemento caption <caption... >... </caption> align Este elemento contido no elemento table adiciona um título à tabela. Valores possíveis do atributo align são top (título acima da tabela, colocação por omissão) ou bottom (título abaixo da tabela). Elemento tr table row <tr... >... </tr> align, valign, bgcolor. O elemento tr define uma linha da tabela. Cada linha pode conter entradas th ou td. O atributo align especifica o alinhamento horizontal. Valores possíveis são left (valor por omissão), center, ou right. O atributo valign especifica o alinhamento vertical. Valores possíveis são top, middle (valor por omisão), bottom, ou baseline (posiciona a 1.ª linha de texto em cada célula numa linha base comum). O atributo bgcolor especifica a cor de fundo da linha da tabela sobrepondo-se a qualquer valor colocado pelo atributo bgcolor da tabela. Elemento th table heading Elemento td table data <th... >... </th> ( tag final opcional) <td... >... </td> ( tag final opcional) colspan, rowspan, align, valign, width, height, bgcolor. Os elementos th e td definem os cabeçalhos e os dados das células da tabela. colspan - o atributo colspan define um cabeçalho ou dado que se estende por múltiplas colunas. rowspan - o atributo rowspan define um cabeçalho ou dado que se estende por múltiplas linhas. align e valign - estes atributos especificam o alinhamento horizontal e vertical dos itens nas células. Os valores possíveis são os mesmos que para os atributos align e valign do elemento tr. Os valores por omissão do alinhamento horizontal

21 HTML 21 são center para elememtos th e left para elementos td, a não ser que tenham sido colocados outros valores para o elemento tr. width e height - estes atributos permitem especificar valores absolutos em pixeis para tamanho de células. Por omissão o tamanho das células é baseado nos dados contidos e no tamanho da janela. bgcolor - este atributo coloca uma cor de fundo para uma célula particular da tabela. Exemplo: <!-- Células que se estendem por 2 colunas --> <html> <head> <title>colspan</title> </head> <body> <h1>colspan</h1> <table border=1> <tr><th>coluna 1 <th>coluna 2 <th>coluna 3 <tr><td colspan=2>item1 <td>item 2 <tr><td>item 3 <td colspan=2>item 4 </table> </body> </html> Ficheiro colspan.html

22 22 HTML Frames Com frames pode-se dividir a janela do browser em várias células rectangulares, cada uma associada a um documento html separado. Deste modo pode-se garantir que certas partes do interface (por exemplo o índice) estejam sempre visíveis no ecrã, permitindo uma navegação mais fácil em sites Web grandes. No entanto torna mais confuso o uso dos botões Back e Forward do browser, assim como do botão Print que normalmente imprime apenas a célula do frame activa. A barra de endereços do browser mostra apenas o endereço do documento de nível mais alto. Num documento com frames o elemento body é suprimido e um elemento frameset define a estrutura básica de linhas e colunas do documento. Um elemento frameset pode conter outros elementos frameset para subdividir ainda mais a janela, ou pode conter elementos frame que referenciam URLs de documentos que são mostrados nas respectivas células. Um documento com frames deve incluir o DOCTYPE Frameset para poder ser validado como um documento legal HTML 4.0. <!doctype html public -//w3c//dtd html 4.0 Frameset//EN > <!doctype html public "-//w3c//dtd html 4.0 Frameset//en"> <!-- Template de documento com frames --> <html> <head> <title>título do Documento</title> </head> <frameset...> <!-- entradas frame e frameset embutidas --> </frameset> </html> Ficheiro frametemplate.html Elemento frameset frame set <frameset... >... </frameset> rows, cols. O elemento frameset define o número e tamanho das células numa página, dividindo a janela em linhas e colunas, criando células rectangulares. Com entradas embutidas pode-se dividir a janela em regiões rectangulares complexas. O atributo rows divide a janela do browser (ou célula corrente, no caso de frames embutidos) horizontalmente.

23 HTML 23 Exemplo: <!-- Exemplo do atributo rows de um frameset --> <html> <head> <title>atributo Rows de um Frameset</title> </head> <frameset rows="50,20%,*,2*"> <frame src="celula.html"> <frame src="celula.html"> <frame src="celula.html"> <frame src="celula.html"> </frameset> </html> Ficheiro framerows.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <!-- Taken from Core Web Programming from --> <!-- Prentice Hall and Sun Microsystems Press, --> <! > <! Marty Hall and Larry Brown; --> <!-- may be freely used or adapted. --> <html> <head> <title>frame Cell</title> </head> <body> <h1>célula de um Frame</h1> Exemplo de um documento. </body> </html> Ficheiro celula.html

24 24 HTML O código divide a janela corrente em 4 células. Cada entrada pode ser um inteiro, representando a altura em pixeis, um inteiro seguido do sinal %, indicando a percentagem do espaço total disponível, ou um sinal *, indicando o espaço restante, o qual pode ser precedido de um inteiro, se há mais que uma entrada desse tipo. O atributo rows deve ter pelo menos 2 entradas. O atributo cols divide a janela corrente ou célula do frame verticalmente. A sintaxe é idêntica à do atributo rows. O atributo cols deve ter pelo menos 2 entradas. Um dos atributos rows ou cols é obrigatório.

25 HTML 25 <!-- 2.º Exemplo de frames --> <html> <head> <title>frames embutidos</title> </head> <frameset rows="40%,60%"> <frame src="celula.html"> <frameset cols="*,*"> <frame src="celula.html"> <frame src="celula.html"> </frameset> </frameset> </html> Ficheiro framescelulas.html

26 26 HTML Elemento frame <frame src= > (sem tag final) src, name, frameborder, marginwidth, marginheight, scrolling, noresize. O elemento frame especifica o documento html que deve ser colocado numa célula particular do frame. src indica o URL do documento que deve ser colocado na célula corrente. Não é em rigor obrigatório porque é permitido um frame vazio. name dá um nome à célula corrente. O atributo target do elemento âncora a ou do elemento form pode ser usado para mostrar novos documentos na célula. frameborder- especifica se um bordo 3D é ou não desenhado entre células. Valores possíveis são Yes ou 1 para mostrar o bordo e No ou 0 para não mostrar. Um bordo só será omitido se as duas células adjacentes especificam não usar bordos. marginwidth e marginheight especificam as margens esquerda e direita e as margens superior e inferior. scrolling especifica se as células devem ter barras de scroll. O valor No desactiva as barras de scroll enquanto que o valor YES (valor por omissão) resulta no surgimento de barras de scroll. noresize por omissão o utilizador pode redimensionar as células do frame arrastando os bordos entre as células. O atributo noresize permite desactivar esta capacidade. Colocação de páginas referenciadas por links em frames específicos Para especificar que uma página referenciada por link de hypertexto, quando seleccionado, seja colocada num determinado frame, é necessário dar um nome à célula desse frame. A atribuição de um nome a uma célula é efectuada através do atributo name do elemento frame. A indicação da célula na qual deve ser mostrada uma página referenciada por um hyperlink é efectuada pelo atributo target do elemento âncora a.

27 HTML 27 Exemplo: <!-- Frame com índice e seccões --> <html> <head> <title>frame com índice e seccões</title> </head> <frameset cols="120,*"> <frame src="indicevertical.html" name="indice"> <frame src="introdução.html" name="principal"> </frameset> </html> Ficheiro frameindiceleft.html Imagem de frameindiceleft.html <!-- Indice Vertical --> <html> <head> <title>índice</title> </head> <body> <table height="100%"> <tr><th><a href="introdução.html" target="principal">introdução</a></th></tr> <tr><th><a href="tabelas.html" target="principal">tabelas</a></th></tr> <tr><th><a href="frames.html" target="principal">frames</a></th></tr> <tr><th><a href="forms.html" target="principal">forms</a></th></tr> </table> </body> </html> Ficheiro indicevertical.html

28 28 HTML Imagem de indicevertical.html <!-- Introdução --> <html> <head> <title>introdução</title> </head> <body> <h1>introdução</h1> Texto de introdução. </body> </html> Ficheiro introdução.html Imagem de introdução.html

29 HTML 29 Outro Exemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <!-- Frame com índice e seccões. --> <html> <head> <title>frame com índice e seccões</title> </head> <frameset rows="75,*"> <frame src="indicehorizontal.html" name="indice"> <frame src="introdução.html" name="principal"> </frameset> </html> Ficheiro frameindicetop.html Imagem de frameindicetop.html

30 30 HTML Forms Em aplicações cliente-servidor, a linguagem usada para interacção entre o cliente e o servidor é HTML (Hyper Text Markup Language). As páginas Web são criadas com tags html, as quais podem ser usadas para dois fins: Para formatar Para criar componentes usados para mostrar dados e/ou aceitar entradas do utilizador (input). Um form é uma secção de uma página html, geralmente constituída por um ou mais componentes html de interface gráfico com o utilizador, designados por componentes GUI (GUI - Graphical User Interface), ou controlos. Estes componentes servem para receber dados do utilizador e trasmiti-los ao servidor. Os forms html permitem criar uma variedade de controlos de interface com o utilizador para receberem entradas de dados numa página Web. Cada um dos controlos tem um nome e um valor. O nome é especificado no ficheiro html da página Web, e o valor é, ou o valor inicial também especificado no ficheiro html, ou proveniente da entrada do utilizador no controlo. Todo o form está associado com o URL de um programa existente no servidor destinado a processar os dados. Quando o utilizador submete o form, geralmente premindo um botão, os nomes e valores dos controlos são enviados, sob a forma de uma string, para o programa especificado no URL. Há duas maneiras possíveis de enviar a string: através do método http get ou através do método http post. Através do método get é efectuada a concatenação do URL com um ponto de interrogação e com a string contendo os dados, sendo enviada a string resultante para o servidor, juntamente com outras linhas de cabeçalho. Através do método post, são enviados os cabeçalhos do pedido constituídos por várias linhas, a primeira das quais informando que é um pedido post, em seguida é enviada uma linha em branco e finalmente uma linha com a string contendo os dados. Exemplo de uma página HTML que inclui um form, que contem 2 campos de texto com os nomes primeironome e ultimonome e um botão submit. O form especifica o URL do programa ( ) para o qual os dados são enviados quando o utilizador premir o botão submit, e qual o método http de envio (get). <html> <body> <form action=' method='get'> <p>primeiro nome:<input type='text' size='20' name='primeironome'></p> <p>último nome:<input type='text' size='20' name='ultimonome'></p> <p><input type='submit' value='send'></p> </form > </body> </html> Ficheiro form1.html

31 HTML 31 Imagem resultante: Em seguida mostramos a informação http enviada pelo browser Internet Explorer ao servidor: GET /programa1?primeironome=miguel&ultimonome=silva HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */* Accept-Language: pt Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;.NET CLR ) Host: localhost:8088 Connection: Keep-Alive Se o método especificado para envio dos dados para o servidor fosse o método post (ficheiro form2.html), a informação http enviada pelo browser Internet Explorer seria a seguinte: POST /programa1 HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */* Accept-Language: pt Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;.NET CLR ) Host: localhost:8088 Content-Length: 36 Connection: Keep-Alive Cache-Control: no-cache primeironome=miguel&ultimonome=silva Para ver esta informação enviada pelo browser para o servidor foi construído um programa em Java, designado ServidorEco, que implementa um simples servidor Web à escuta no porto 8088 da máquina local. Após arrancar este programa, a submissão de

32 32 HTML um form Web que especifique o endereço (qualquer que seja o programa indicado e os dados enviados), retorna uma página Web mostrando toda a informação http enviada pelo browser. O mecanismo de funcionamento dos forms html é o seguinte: os controlos GUI recebem os dados do utilizador, tendo cada controlo um nome e um valor. Uma string contendo os pares nome valor é enviada ao servidor quando o form é submetido. O programa no servidor que recebe a string extrai os nomes e valores, processa o pedido e envia uma resposta sob a forma de página Web. Grande parte da interacção entre cliente e servidor é feita usando forms html. Os forms html permitem criar um conjunto de elementos para entrada de dados associados a um URL particular. A cada um destes elementos é dado um nome (especificado no ficheiro html) e tem um valor baseado no componente html original ou na entrada do utilizador. Quando o form é submetido, os nomes e valores de todos os elementos activos são colecionados numa string constituída pelos pares nome e valor com o sinal de igual entre eles, e com o sinal ampersand (&) entre cada par (nome1=valor1&nome2=valor2&nome3=valor3). Esta string é enviada ao URL designado no elemento form. Há dois métodos de submissão, get e post. No método get é feito o append ao URL de um sinal de interrogação e da string com os pares nome valor. No método post a string com os pares nome valor é enviada a seguir ao cabeçalho http e a uma linha em branco. Um form, além de poder conter uma variedade de controlos, possui 2 atributos principais: action, que define a localização do pedido, e method, que define o tipo de pedido. Dentro do form existem controlos que são componentes de interface gráfico com o utilizador (GUI) que permitem ao utilizador interactuar com o interface. Podem ser campos de texto, botões, check boxes, radio buttons, menus, etc. Para alguns componentes, o utilizador modifica o estado destes componentes efectuando entrada de dados ou seleccionando opções disponíveis, eenquanto que para outros uma acção do utilizador causa um pedido ao servidor. Elemento form <form action= URL... >... </form> action (obrigatório), method, enctype, target. O elemento form cria uma área para elementos de entrada de dados e especifica o URL para o qual os dados colecionados serão transmitidos. action especifica o URL (ex.: do servlet ou programa CGI que vai processar os dados do form, ou um endereço de (ex.: mailto:xxx@dei.isep.ipp.pt.) para o qual os dados do form serão enviados. Quando se usa um endereço de tem se especificar o método post para envio dos dados.

33 HTML 33 method especifica o método a usar para o envio dos dados ao servidor. Valores possíveis são get e post sendo get o valor por omissão. O métodod get também é usado quando o browser efectua um pedido normal de um URL. O método get é o mais simples e também é útil para testar programas do lado do servidor sem criar um form, simplesmente usando o URL concatenado com um ponto de interrogação e com os dados. No entanto tem duas desvantagens: os pedidos têm um limite baixo na quantidade de dados a enviar devido ao limite existente para o tamanho de um URL, e a maior dos browsers mostram na sua barra de endereços o URL juntamente com os dados concatenados, não sendo conveniente enviar dados sensíveis por este processo. enctype especifica o modo como os dados são codificados antes de serem transmitidos. No modo por omissão, cada espaço é convertido no sinal mais (+) e os caracteres não alfanuméricos no sinal de percentagem (%) seguidos de 2 dígitos com o código ASCII desses caracteres. Além disto o sinal de igual (=) é colocado entre cada nome e valor e o sinal & entre cada entrada. target usado para determinar que célula de frame deve ser usada para mostrar os resultados enviados pelo servidor.por omissão os resultados são mostados no frame que contem o form submetido. Um elemento form pode conter uma variedade de outros elementos para criar os respectivos controlos. Tipos de Controlos: 1. Controlos de entrada de texto: a. Text field campo com uma única linha para entrada de texto. b. Password field não é feito o eco da entrada de texto. c. Text area área de texto com múltiplas linhas. 2. Botões: a. Submit para submeter o form enviando-o ao programa do servidor especificado no parâmetro action. b. Reset para efectuar o reset dos valores de todos os controlos do form para os valores originais especificados pelo parâmetro value. c. Botão javascript permite associar código javascript, sendo o uso mais comum o de verificar que todos os elementos de entrada têm valores apropriados antes de submeter o form ao servidor. 3. Check box e Radio button para o utilizador escolher entre um conjunto de alternativas predefinidas. 4. Select (Combo box e List box) para o utilizador escolher entre um conjunto de opções. 5. File controlo que permite enviar ficheiros para o servidor. 6. Image mostra uma imagem que quando clicada envia para o servidor as coordenadas x e y do ponto relativamente ao canto superior esquerdo da imagem 7. Hidden campos não visíveis que armazenam nomes e valores fixos que são enviados para o servidor independentemente das entradas do utilizador. 8. Fieldset (Grupos de controlos) para visualmente agrupar controlos dentro de um form.

34 34 HTML 1. Controlos de entrada de texto 1.a Text field Elemento: input, Atributo type= text <input type= text name= > (sem tag final) type, name (obrigatório), value, size, maxlength, disabled, readonly. Este elemento cria um campo de texto para entrada de dados com uma única linha. Nos elementos input, o valor do atributo type, por omissão, é text. No entanto, recomenda-se que, mesmo para a criação de um campo de texto, se explicite o valor do atributo type. Normalmente, associa-se algum texto descritivo a um campo de texto. Como os browsers alteram as posições do conteúdo das páginas dependendo da largura da janela, é importante garantir a não separação entre o texto descritivo e o campo de texto associado. name - o atributo name identifica o campo de texto quando o form é submetido. value o atributo value, se fornecido, especifica o conteúdo inicial do campo de texto. Quando o form é submetido o conteúdo corrente é enviado. Se o campo de texto está vazio quando o form é submetido, os dados do form, relativamente a esse campo de texto, consistem apenas do nome e do sinal de igual (ex.: nome1=&nome2=valor2). size especifica a largura do campo de texto em quantidade de caracteres. Se o utilizador entra mais texto, o campo de texto efectua scroll. maxlength máximo número de caracteres permitidos. disabled desactiva um campo de texto, não podendo ser editado, nem faz parte da submissão. readonly - não pode ser editado, mas faz parte da submissão. Exemplo: <input type='text' name='firstname' value='escreva aqui o nome' size='20' maxlength='30'> Ficheiro text.html

35 HTML 35 Imagem resultante: A 1.ª linha da mensagem enviada pelo browser ao programa do servidor (por exemplo programa1) é a seguinte: GET /programa1?primeironome=jorge HTTP/1.1 Nota: Para ver esta informação enviada pelo browser para o servidor pode arrancar o programa Java fornecido, designado ServidorEco, que implementa um simples servidor Web à escuta no porto 8088 da máquina local. Ao ficheiro text.html apresentado acima deverão ser acrescentadas as 3 primeiras e 3 últimas linhas mostradas a seguir, para especificar o endereço ao qual deve ser submetido o form. <html> <body> <form action=' method='get'> <input type='text' name='primeironome' value='escreva aqui o nome' size='20' maxlength='30'> </form > </body> </html> Ficheiro text1.html

36 36 HTML A maior parte dos browsers submetem o form quando o utilizador pressiona Enter num campo de texto, mas o comportamento depende do browser. O Netscape só submete o form se este tem apenas um único campo de texto, independente do número de forms na página, enquanto que o Internet Explorer só submete o form, ao pressionar Enter num campo de texto, se a págima contem um único form, independente do número de campos de texto no form. Neste exemplo ao pressionar Enter, o form é submetido, e o servidor retorna uma página Web mostrando toda a informação http enviada pelo browser. Em outros exemplos será necessário incluir um botão para submeter o form explicitamente, o que pode ser conseguido incluindo a seguinte linha: <p><input type='submit'></p> Como o comportamento dos browsers não é standard, não é aconselhável que a submissão de um form dependa de pressionar Enter num campo de texto, pelo que se deve incluir sempre uma botão para submeter o form explicitamente. <html> <body> <form action=' method='get'> <input type='text' name='primeironome' value='escreva aqui o nome' size='20' maxlength='30'> <p><input type='submit' ></p> </form > </body> </html> Ficheiro text2.html

37 HTML 37 1.b Password field Elemento: input, Atributo type= password <input type= password name= > (sem tag final) type, name (obrigatório), value, size, maxlength, disabled, readonly. Este elemento cria um campo de texto semelhante ao text field com a excepção de que o texto digitado pelo utilizador não é mostrado, sendo mostrado outro carácter, normalmente um asterisco. É útil para entrada de informação sensível. No entanto o texto digitado é transmitido como o valor do campo quando o form é submetido. Se o método get é usado para transmitir a informação para o servidor, o valor é observável na barra de endereços do browser, pelo que se deve usar o método post, para manter a privacidade do utilizador. Exemplo: <input type='password' name='loginpassword' value='entre a password' size='20' maxlength='20'> Ficheiro password.html Imagem resultante: Neste exemplo e nos seguintes, apresentámos apenas o código para a criação do controlo. No entanto, numa aplicação real, para se perceber o significado do controlo, é necessário associá-lo com texto descritivo. O texto descritivo e o controlo associado devem ser agrupados explicitamente, para garantir que o browser não os separa, o que poderia suceder ao variar a largura da janela do browser.

38 38 HTML Apresentamos em seguida o controlo password com o texto descritivo Password:, num form com botão submit, primeiro usando o método get para submeter o form ao servidor, e em seguida usando o método post. <html> <body> <form action=' method='get'> <input type='password' name='loginpassword' value='entre a password' size='20' maxlength='20'> <p><input type='submit' ></p> </form > </body> </html> Imagem resultante: ficheiro pasword1.html mensagem enviada pelo browser: GET /programa1?loginpassword=secreta HTTP/1.1

39 HTML 39 <html> <body> <form action=' method='get'> <p> Password: <input type='password' name='loginpassword' value='entre a password' size='20' maxlength='20'> </p> <p><input type='submit'></p> </form > </body> </html> ficheiro pasword2.html Informação http enviada pelo browser ao servidor: POST /programa1 HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */* Accept-Language: pt 1.c Text area Elemento: textarea <textarea name= rows=xxx cols=yyy... > </textarea> name (obrigatório), rows (obrigatório), cols (obrigatório), disabled, readonly. Este elemento cria uma área de texto com múltiplas linhas. Não tem atributo value mas o texto entre os tags é usado como conteúdo inicial da textarea. name nome enviado ao servidor. rows número de linhas visíveis de texto. Mais linhas fazem surgir uma barra de scroll. cols largura visível da área de texto, em número de caracteres.

40 40 HTML 2.a Submit 2. Botões Elemento: input, Atributo type= submit <input type= submit > (sem tag final) type, name, value, disabled. Este elemento cria um botão que quando clicado envia os dados do form ao programa do servidor especificado no parâmetro action. name e value se o botão é usado simplesmente para desencadear a submissão do form, o nome pode ser omitido. Se é omitido não contribui para a string que é enviada ao servidor. Se só o nome é fornecido, esse nome e valor ( o label do botão) são enviados. Se se fornece o atributo value, este valor é usado para o label do botão. Se um form tem mais que um botão submit, só os valores do botão seleccionado são enviados para o servidor. Exemplo: Imagem resultante: <input type='submit' name='botão 1' value='processar'> Ficheiro submit.html

41 HTML 41 2.b Reset Elemento: input, Atributo type= reset <input type= reset > (sem tag final) type, value, disabled. Este elemento cria um botão que serve para efectuar o reset dos valores de todos os controlos do form para os valores originais especificados pelo parâmetro value. Não contribui para a string que é enviada ao servidor. value especifica o label do botão. Por omissão o label é Reset Um modo alternativo de criar um botão reset é através do seguinte elemento button com o atributo type= reset. Exemplo: <button type= reset... >... </button> name, value, disabled. <input type='reset' value='reset'> Ficheiro reset.html Imagem resultante:

42 42 HTML 2.c Botão javascript Elemento: input, Atributo type= button <input type= button > (sem tag final) type, name, value, disabled. Este elemento cria um botão que permite associar código javascript, sendo o uso mais comum o de verificar que todos os elementos de entrada têm valores apropriados antes de submeter o form ao servidor. Um modo alternativo de criar um botão javascript é através do seguinte elemento button com o atributo type= button. <button type= button... >... </button> name, value, disabled. Exemplo: <input type='button' name='botao1' value='ok'> Ficheiro button.html Imagem resultante: 3. Check Box e Radio Button

43 HTML 43 Estes controlos são úteis para permitir ao utilizador seleccionar entre um conjunto de alternativas predefinidas. Cada check box pode ser seleccionada ou desseleccionada individualmente, enquanto os radio buttons podem ser agrupados tal que só um radio button de um grupo pode ser seleccionado de cada vez. 3.a Check box Elemento: input, Atributo type= checkbox <input type= checkbox name= > (sem tag final) type, name (obrigatório), value, checked, disabled, readonly. Este elemento cria um checkbox cujo par nome-valor só é enviado ao servidor se o checkbox está on, quando o form é submetido. name especifica o nome que é enviado ao servidor. value é opcional e por omissão vale on. checked serve para criar um checkbox inicialment on. Por omissão inicialmente não está on. Exemplo: <input type='checkbox' name='país' value='de'> Alemanha <br> <input type='checkbox' name='país' value='br'> Brasil <br> <input type='checkbox' name='país' value='uk'> Inglaterra <br> <input type='checkbox' name='país' value='pt' checked> Portugal <br> Imagem resultante: Ficheiro checkbox.html

44 44 HTML 3.b Radio button Elemento: input, Atributo type= radio <input type= radio name= value=... > (sem tag final) type, name (obrigatório), value (obrigatório), checked, disabled, readonly. Este elemento cria um radio button. Pode-se criar um grupo de radio buttons fornecendo o mesmo nome (atributo name) para todos os radio buttons do grupo. Só um radio button em um grupo pode ser seleccionado de cada vez. A selecção de um desselecciona os outros do mesmo grupo. O par nome valor do seleccionado é enviado quando o form é submetido. name especifica o nome do componente que é partilhado por outros do mesmo grupo. value especifica o valor que é transmitido com o nome quando o form é submetido. Não afecta o aspecto do radio button. checked serve para criar um radio button inicialment on. Por omissão inicialmente não está on. Exemplo: <input type='radio' name='país' value='de'> Alemanha <br> <input type='radio' name='país' value='br'> Brasil <br> <input type='radio' name='país' value='uk'> Inglaterra <br> <input type='radio' name='país' value='pt' checked> Portugal <br Imagem resultante: Ficheiro radio.html

45 HTML Select (Combo box e List box) Um elemento select apresenta um conjunto de opções ao utilizador. Se só uma entrada pode ser seleccionada (sem o atributo multiple) e não foi especificado o tamanho visível (sem o atributo size) as opções são apresentadas numa combo box. Se são permitidas múltiplas selecções ou um dado tamanho foi especificado então as opções são apresentadas numa list box. As opções são especificadas pelo elemento option contido dentro do elemento select. O formato típico é o seguinte: <select name= nome... > <option value= valor1 > Texto da opção 1 <option value= valor2 > Texto da opção 2... <option value= valor3 > Texto da opção 3 </select> <select name= >... </select> name (obrigatório), size, multiple, disabled. Este elemento pode criar um combo box ou um list box dependendo dos atributos especificados. Cria um combo box se não são especificados os atributos size e multiple. Cada opção é especificada por um elemento option dentro do elemento select. name identifica o controlo. size número de linhas visíveis. multiple especifica que podem ser seleccionadas múltiplas entradas. Se omitido, só é permitida a selecção de uma entrada. <option > (tag final opcional) selected, value, disabled. Este elemento especifica cada escolha do menu. selected especifica que o respectivo item está seleccionado inicialmente. value especifica o valor que é transmitido com o nome do controlo select quando o form é submetido. Não é o texto que é mostrado ao utilizador. Esse texto é especificado a seguir ao tag option. Exemplos de combo box, list box de escolha simples e list box de escolha múltipla....

46 46 HTML 5. File Este elemento cria um controlo constituído por um campo de texto seguido de um botão Browse. O utilizador pode entrar um nome completo de um ficheiro no campo de texto ou clicar no botão Browse para abrir uma janela de diálogo para selecção de ficheiro que permite interactivamente escolher o caminho para o ficheiro. Na declaração inicial do form deve-se especificar o atributo enctype= multipart/form-data para que quando o form for submetido, o conteúdo do ficheiro seja enviado para o servidor. Elemento: input, Atributo type= file <input type= file > (sem tag final) type, name (obrigatório), value (ignorado), size, maxlength, accept, disabled, readonly. name identifica o controlo. value por questões de segurança este atributo é ignorado. Só o utilizador final especifica o nome do ficheiro. size e maxlength do mesmo modo que num campo de texto especificam o número de caracteres visíveis e o máximo número de caracteres permitido. accept serve para restringir os nomes dos ficheiros disponíveis. 6. Image Este elemento pemite criar imagens designadas mapas de imagem do lado do servidor ( server-side image maps ). Elemento: input, Atributo type= image <input type= image > (sem tag final) type, name (obrigatório), src, align, disabled. Este elemento mostra uma imagem que quando clicada submete o form e envia para o servidor as coordenadas x e y do ponto relativamente ao canto superior esquerdo da imagem Exemplo: <form action= Url-do-programa1 > <input type= image name= mapa1 src= Url-da-imagem > </form> Clicando na imagem, por exemplo no ponto (300, 200), o form é submetido ao progama do lado do servidor (por exemplo ao programa1), sendo enviada uma mensagem http pelo browser com a seguinte primeira linha: GET /programa1 mapa1.x=300&mapa1.y=200 HTTP /1.1

47 HTML Hidden Estes controlos não criam nenhum componente gráfico no browser. Armazenam nomes e valores fixos que são enviados para o servidor, quando o form é submetido, independentemente das entradas do utilizador. São utilizados com vários objectivos: para manter informação sobre um utilizador quando ele navega por diferentes páginas dentro de um site. para fornecer entradas predefinidas a um programa do lado do servidor quando várias páginas estáticas html interactuam com esse mesmo programa no servidor. para guardarem informação contextual em páginas geradas dinamicamente. Elemento: input, Atributo type= hidden <input type= hidden name= value= > (sem tag final) type, name (obrigatório), value Dado que o código html é facilmente visivel por qualquer utilizador, e como não existe nenhuma maneira de esconder o código que gera a página, não se devem usar hidden fields para guarder passwords ou outra informação sensível. Exemplo: Imagem resultante: <input type='hidden' name='taxa' value='0.17'> Ficheiro hidden.html

48 48 HTML 8. Fieldset (Grupos de controlos) O elelemto fieldset juntamente com o elemento associado legend permite agrupar visualmente controlos dentro de um form. <fieldset> </fieldset> nenhum Este elemento usa um contentor para agrupar controlos e opcionalmente um elemento legend para legendar o grupo de controlos <legend> </legend > align Controlos realizados pelo Elemento input O tag input identifica um controlo e os seus atributos, sendo type o mais significativo dos atributos porque identifica o tipo de controlo. Atributos possíveis do tag input: type especifica o tipo de controlo a criar, existindo as seguintes possibilidades: o text o password o hidden o submit o reset o button o checkbox o radio o file o image name nome atribuido ao controlo value especifica o valor inicial do controlo size especifica a largura inicial do controlo, em geral em pixeis, mas nos controlos text e password é em caracteres. maxlength usado apenas nos controlos text e password para especificar o número máximo de caracteres que o utilizador pode digitar. checked usado apenas nos controlos radio e checkbox tem um valor Boolean para indicar se o controlo deve ser apresentado seleccionado. src usado apenas no controlo image, especifica a localização da imagem.

49 HTML 49 Imagens Uma imagem pode ser incorporada numa página html, como se fosse parte integrante da página que se está a observar, através do elemento img: <img src= URL-da-imagem >) ou colocada num servidor para visualização externa, através de um link, usando o elemento a (anchor): <a href= URL-da-imagem >Nome-da-imagem</a> No caso de uma imagem acessível através de um link, dependendo do formato do ficheiro da imagem, o browser mostrará a imagem na sua área de visualização (para os formatos suportados pelo browser como gif ou jpeg) ou chamará um programa exterior para o fazer. Mapas de Imagem Interactivos São imagens selecionáveis, que contêm links para diversos URLs distintos, consoante o local da imagem onde o utilizador clica. 1. Mapas de Imagem do Lado do Cliente O ficheiro html deve conter o elemento img, com o atributo src para indicar a imagem a usar, e com o atributo usemap para indicar o nome do elemento map, que define regiões clicáveis e respectivos URLs. O atributo usemap especifica o nome do elemento map como #nomemap (se pertence à mesma página html) ou URL#nomeMap se se encontra noutra página. O elemento map que contem as definições das regiões clicáveis e respectivos URLs, tem obrigatoriamente o atributo name, através do qual recebe um nome, permitindo ser referenciado por outros elementos. Elemento map <map name=... >... </map> name (obrigatório) Este elemento permite associar URLs com diferentes regiões de uma determinada imagem, passando a imagem a constituir um mapa de imagem. Cada região clicável é descrita num elemento area, juntamente com o correspondente URL. Os vários elementos area aparecem dentro do elemento map. Quando o utilizador clica numa área descrita num elemento area, o corespondente URL é carregado. Todo o processamento é efectuado pelo browser (mapa de imagem do lado do cliente), em oposição aos mapas de imagem do lado do servidor, para os quais, a imagem quando clicada envia para o servidor as coordenadas x e y do ponto, e é do lado do servidor que é determinada a acção a executar.

50 50 HTML Estas funcionalidades dos mapas de imagem tornam-nos úteis para construir não só mapas tradicionais mas também barras de ferramenta e imagens de navegação. Elemento area <area alt=... >... > (sem tag final) href, coords, shape, alt (obrigatório), nohref, target. O elemento area só pode aparecer dentro do elemento map e descreve uma região clicável dentro de um mapa de imagem e o respectivo URL. href URL do documento o qual pode inluir o nome de uma secção a seguir a #. coords lista das coordenadas de uma região separadas por vírgulas. As coordenadas são interpretadas relativamente ao canto superior esquerdo da imagem. A quantidade de coordenadas depende do atributo shape. shape valores possíveis são: o Rect (valor por omissão) devem ser fornecidas 4 coordenadas: do canto superior esquerdo e do canto inferior direito, do tipo x1, y1, x2, y2. o Circle coordenadas do centro e raio, do tipo x, y, raio. o Poly coordenadas dos vértices do tipo x1, y1, x2, y2,..., xn, yn. o Default não tem coordenadas e designa a imagem completa. No caso de regiões sobrepostas o URL de um ponto é determinada pelo primeiro elemento area que o inclua. Portanto a entrada default deve ser a última. alt string descritiva do URL de destino mostrada na linha de status dos browsers quando o cursor se move por cima da zona. nohref designa uma região sem URL associado. Só necessário para excluir parte de uma região activa devido a uma outra entrada area. A entrada nohref deve estar antes para produzir o efeito desejado. target designa o frame no qual mostrar o documento. Exemplo: Vamos partir da seguinte imagem representativa do mapa de Portugal.

51 HTML 51 Ficheiro portugal.jpg Suponhamos que pretendíamos associar às cidades do Porto, Coimbra, Lisboa e Faro, textos descritivos dessas cidades, e outro texto para o resto de Portugal. Em primeiro lugar temos que dividir o mapa em zonas, para que um clique numa zona faça surgir a respectiva página. Devido à forma da imagem podemos considerar 4 círculos, um para cada cidade, e uma linha poligonal para o resto do país. A determinação das coordenadas do centro dos círculos, dos raios e dos pontos do polígono podem ser obtidas com um programa que indique a posição do cursor em pixeis, como por exemplo o paint.

52 52 HTML <html> <body> <img src="portugal.jpg" usemap="#mapaportugal"> <map name="mapaportugal"> <area href= "porto.html" shape = "circle" coords= "119, 74, 10" alt="cidade do Porto"> <area href= "coimbra.html" shape = "circle" coords= "120,137, 10" alt="cidade de Coimbra"> <area href= "lisboa.html" shape = "circle" coords= "84,224, 10" alt="cidade de Lisboa"> <area href= "faro.html" shape = "circle" coords= "147,328, 10" alt="cidade de Faro"> <area href= "restodeportugal.html" shape = "poly" coords= "100, 15, 140, 10, 140, 35, 215, 20, 230, 50, 230, 65, 205, 90, 200, 165, 180, 185, 210, 215, 190, 235, 205, 265, 180, 295, 180, 325, 150, 335, 100, 330,105, 245, 65, 225, 110, 85" alt="resto de Portugal"> </map> </body> </html> ficheiro mapa1.html

53 HTML 53 O atributo name do elemento map é obrigatório e serve para ser referenciado pelo atributo usemap do elemento img. 2. Mapas de Imagem do Lado do Servidor Elemento: input, Atributo type= image <input type= image > (sem tag final) type, name (obrigatório), src, align, disabled. Este elemento mostra uma imagem que quando clicada submete o form e envia para o servidor as coordenadas x e y do ponto relativamente ao canto superior esquerdo da imagem name: identifica a imagem quando o form é submetido src URL da imagem align tem as mesmas opções do atributo align do elemento img: left, right, top, middle, bottom (valor por omissão). disabled - desactiva o mapa de imagem.

54 54 HTML Para mostrar como as coordenadas do ponto onde se efectua o clique do mouse são enviadas para o servidor, consideremos o seguinte elemento form: <form action= Url-do-programa1 > <input type= image name= mapa2 src= Url-da-imagem > </form> Clicando na imagem, por exemplo no ponto (300, 200), o form é submetido ao programa do lado do servidor (por exemplo ao programa1), sendo enviada uma mensagem http pelo browser com a seguinte primeira linha: GET /programa1 mapa2.x=300&mapa2.y=200 HTTP /1.1 Exemplos: Consideremos o seguinte ficheiro html que não especifica o método http para envio de informação ao servidor: <html> <body> <form action=' <input type="image" name="mapa2" src="portugal.jpg"> </form> </body> </html> ficheiro mapa2.html

55 HTML 55 Um clique no mapa faz surgir na barra de endereços o pedido http get ao servidor: A mensagem enviada ao servidor pode ser visualizada com a ajuda do programa java ServidorEco já apresentado: GET /programa1?mapa2.x=119&mapa2.y=74 HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.msexcel, application/vnd.ms-powerpoint, application/msword, */* Accept-Language: pt Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;.NET CLR ) Host: localhost:8088 Connection: Keep-Alive Se o form especificar o método post para enviar a informação ao servidor, como se mostra a seguir: <html> <body> <form action=' method='post'> <input type="image" name="mapa2" src="portugal.jpg"> </form> </body> </html> ficheiro mapa3.html

56 56 HTML Um clique no mapa faz surgir na barra de endereços o pedido http ao servidor: A mensagem enviada ao servidor é a seguinte: POST /programa1 HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.msexcel, application/vnd.ms-powerpoint, application/msword, */* Accept-Language: pt Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;.NET CLR ) Host: localhost:8088 Content-Length: 23 Connection: Keep-Alive Cache-Control: no-cache