HTML HyperText Markup Language Composição Web Engenharia Informá@ca / Informá@ca Web 2014/15 Artur M. Arsénio
Projeto Projecto final Equipas de até 2 elementos (...) construir um sí@o Internet (...) número mínimo e máximo de páginas caracterís@cas obrigatórias ToDo: encontrar um cliente para o sí@o a construir 2
Ul@ma Aula Revisão SGML (Standard Generalized) vs HTML (HyperText) Markup Languages Construtores de SGML presentes no HTML Regras e Encadeamento das E@quetas SGML (Standard Generalized) vs HTML (HyperText) BASE - define o endereço base para os recursos indicados no documento LINK - estabelece relações entre o documento corrente e outros documentos META - define caracterís@cas do documento SCRIPT - embebe scripts no documento (p.e. Javascript) STYLE - usado para embeber uma StyleSheet no documento TITLE - define o itulo do documento tal como aparece no Browser E@quetas de Style, de Headings, e Organizacionais Caractéres Especiais Hypertext Links Protocolo / Endereço / Caminho URL Caminhos Absolutos e Rela@vos Imagens e Listas 3
Formulários Um formulário - form - HTML permite ao u@lizador fornecer dados ao servidor web Vamos ver o formulário em HTML a aparecer ao u@lizador com campos de entrada e texto descri@vo, pronta a ser preenchida por este Quando o formulário é subme@do, os dados preenchidos nos campos de entrada (input) são enviados para o servidor web e processados, por exemplo por um programa CGI. 5
Definição de um formulário - Form A form é definida da seguinte forma: <form name="form-name" action="path/to/cgi" method="post">!... (form fields and descrip9ve text go here)! </form>! O atributo opcional name dá um nome à form. Ú@l quando se usa JavaScript para aceder à form. O path to cgi é um URL que especifica a localização do programa que irá processar a form. O atributo method pode ser "get" ou "post A região entre o inicio e fim das marcas form podem conter campos de entrada (input) assim como qualquer outro conteúdo HTML.! 6
Métodos de Submeter dados (Submit) do Formulário Método "get"! Os dados de entrada são adicionados ao URL do pedido enviado ao servidor quando o formulário é subme@do. O servidor @picamente passa os dados a um programa CGI através de uma variável de ambiente. Este método é primi@vo e apenas apropriado para o envio de pequenas quan@dade de dados do formulário. Método "post"! Os dados de entrada são enviados ao servidor no corpo de dados body a seguir ao cabeçalho do pedido. O servidor passa os dados a um programa CGI através de um mecanismo de processamento de entradas. Método preferencial. 7
Campos de Entrada (Input) do Formulário O @po mais comum de campo de entrada de formulário é definido u@lizando a e@queta <input>, que permite vários @pos de elementos de entrada: caixas de texto, caixas de selecção (checkbox), etc. Note- se que nunca há uma e@queta de fim, uma vez que esta define um elemento, não uma região. A forma geral dessa tag é <input type="input-type" name="field-name"... >! O atributo name dá um nome ao campo de entrada, o que é ú@l para JavaScript e processamento CGI. O atributo type permite que diferentes @pos de campos de entrada sejam definidos. Dependendo do @po, pode haver outros atributos para controlar outras propriedades do elemento. 8
O atributo type pode ser instanciado para um destes valores Input Field Types checkbox - especifica uma caixa a qual pode ser clicada para selecionar esta (check) ou remover selecção (un- check) hidden - usado para fornecer dados que o u@lizador não vê password - como text, mas quando o texto é inserido aparece como asteriscos, apesar de ser subme@do ao servidor tal como escrito radio - especifica um botão circular. Vários botões deste @po são normalmente definidos como um grupo, todos com o mesmo nome. É como uma checkbox, mas apenas um botão do grupo pode estar seleccionado num dado instante. reset - Especifica um botão de limpeza que retorna os campos de entrada da form aos valores iniciais text - Especifica uma caixa pequena na qual o u@lizador pode introduzir texto submit - Especifica um botão de envio para enviar ao servidor os dados completos da form 9
Outros Atributos da E@queta <input> Para campos do @po (type) text ou password:! size= width, onde width é um inteiro que dá a largura da caixa de texto em caractéres. O valor por defeito é 20. Maxlength= length especifica o número máximo de charactéres que podem ser introduzidos na caixa. checked (este atributo não leva valor) Se está presente, a caixa ou botão é seleccionado por defeito. para os botões checkbox e radio! Placeholder= text texto informa@vo sobre informação a submeter para o preenchimento value="value" especifica um valor para o item por defeito ou, para os botões de submit e reset, um texto para o botão 10
Elementos de Menu do Formulário Um menu é definido como: <select name="name">! <option> menu item 1 <option> menu item 2... </select>! A aparência por defeito do elemento select é apresentar o item de menu seleccionado numa caixa de texto, com um botão de scroll num dos lados o qual faz o pop up do menu para permi@r a selecção de um item diferente Para criar um menu que mostra várias opções na janela, pode- se incluir o atributo size= lenght" onde lenght é o número de items a mostrar Normalmente, apenas um item da lista pode ser seleccionado. Para permi@r a selecção de mul@plos items, usa- se o atributo multiple. 11
O Elemento textarea O text type do elemento de entrada (input) é des@nado apenas para uso com pequenas quan@dades de texto. Usa- se a e@queta textarea para ter espaço para maiores quan@dades de texto, assim como para scrollbars <textarea name= usrname" rows= 8" cols= 30">! Enter your text here. </textarea>! 12
Mapas de Imagens (Image Maps) Um mapa de imagem é uma imagem que tem hotspots definidos, ou seja, lugares diferentes na imagem são links para vários URLs. Exemplos de u9lização: Mapa de um país, com hotspots definidos para diferentes regiões do país, cada um ligado a um documento referente à região. Uma imagem composta por rótulos de texto que agem como links Este método permite ao texto usar fontes ou esquemas de cores mais extravagantes do que as fontes de texto suportadas pelo browser Ou organizar links duma forma (e.g. círculo) dizcil de alcançar com uma tabela HTML ou lista. Elementos de um Mapa de Imagem: Um mapa de imagem é composto por três elementos: a imagem, o mapa, e o documento que usa o mapa A imagem está sempre num ficheiro separado, referenciado usando uma e@queta <img> 14
Tipos de Mapas de Imagem Mapa do lado do cliente: Preferivel na maioria dos casos. O browser obtém o URL correspondente ao hotspot onde está o rato, e abre esse link quando este é clicado Um mapa do lado do cliente é geralmente con@do no documento que o u@liza. Mapa do lado do servidor: U@lizador clica num ponto da imagem, e o browser envia essa localização para o servidor Um mapa do lado do servidor está num ficheiro separado, ou pode ser um programa CGI. Usa- se nalgumas aplicações, e.g. centrar ou fazer zoom num ponto da imagem seleccionada Iremos discu9r mapa de imagem do lado do cliente primeiro! 15
A Imagem e Convenção para Numerar Pixels Um pixel específico (elemento de imagem) é iden@ficado por um par de números, dando primeiro a dimensão horizontal (x) e depois a dimensão ver@cal (y), separadas por uma vírgula A numeração do Pixel começa do 0,0 no canto superior esquerdo da imagem Por começar no zero o número máximo do pixel numa dada direcção é 1 a menos do que o tamanho da imagem nessa direcção. E.g. se uma imagem tem 200 pixels de largura e 300 pixels de altura, o pixel no canto inferior direito tem coordenadas 199,299 Obtenção do tamanho da imagem em pixels: informações fornecidas pelo sistema de ficheiros, por exemplo, do Windows 8 usando um programa de manipulação de imagem que obtém o tamanho da imagem As imagens podem ser ob@dos por: @rar uma foto com uma câmera digital digitalização de uma cópia da foto usando um scanner desenhar uma imagem em um computador, usando um programa como o Paint usando clip art ou imagens disponíveis (respeitando as regras de direitos de autor) 16
O Mapa O mapa de imagem especifica um conjunto de formas geométricas (shape) que ocupam regiões diferentes da imagem Cada forma está associada a um URL que referencia um documento a ser aberto quando o u@lizador clica sobre essa forma geométrica Regras sobre a cobertura: As regiões não necessitam de cobrir completamente a imagem. Se o u@lizador clicar numa parte da imagem que não está dentro de uma região definida, nada acontece. Regiões podem se sobrepor. Clicando nas partes sobrepostas de duas regiões selecciona a região que está definida em primeiro lugar no mapa. Para lidar com cliques que não são em nenhuma das regiões definidas, pode- se definir uma área retangular que cobre toda a imagem, colocando esta em úl@mo no mapa. 17
Definição do Mapa O mapa do lado do cliente é colocado no corpo (body) do documento que o u@liza <map name="map-name">! <area href="url" shape="shape"! coords="x,y,..." alt="alternate text">! <area href="url" shape="shape"! coords="x,y,..." alt="alternate text">!... </map>! O map- name atribui um nome ao mapa o qual será usado para associar o mapa a uma imagem. E@queta <area> Não há nenhuma marca de fim para o elemento <area> A URL é a referência do link a ser aberto quando a região definida por este elemento é clicada O valor do atributo shape é rect (retângulo ), circle (círculo), ou poly (polígono) O número de valores na lista de coordenadas - coords - irão variar em função da forma geométrica O atributo alt oferece um texto alterna@vo para browsers não- gráficos 18
Formas geométricas Shapes O atributo shape do elemento <area> pode ser um dos seguintes: rect: leva dois pares x, y na lista de coordenadas coords. O primeiro par é o canto superior esquerdo do rectângulo, e o segundo par é o canto inferior direito. circle: leva três números na lista de coordenadas coords. Os primeiros dois números são da posição x, y do centro do círculo, e o terceiro é o raio. poly: leva três ou mais pares x, y na lista de coordenadas coords. Cada par x, y é um vér@ce do polígono. O primeiro e úl@mo par devem ser o mesmo para fechar o polígono, embora a maioria dos browsers consigam inferir um ponto de fecho, se este fôr omi@do Exemplo <map name="meumapa"> <area shape="circle" coords="58,50,40" href="helloworld.html"> <area shape="rect" coords="136,11,227,89" href="font.html"> <area shape="poly" coords="309,13,358,89,257,89" href="headings_tags.html"> </map> 19
Uso do Mapa de Imagem O documento que u@liza o mapa de imagem precisa incluir tanto o mapa como a imagem (ambos elementos do body). O mapa não aparece na página processada, pelo que a sua localização no documento não é importante. O mapa é normalmente colocado imediatamente antes ou depois da imagem por conveniência A imagem é incluída como habitual, por meio de uma marca <img> Uso de atributos habituais especificando a altura, largura e texto alterna@vo É também geralmente desejável incluir o atributo border="0 Suprime a moldura fina que é usualmente colocada em volta da imagem. A maioria dos browsers colocam uma côr especial nela quando uma imagem é um mapa, o que geralmente é indesejável. Leva um atributo usemap adicional para especificar o mapa, onde o meumapa é o nome definido pelo atributo name do mapa:!!!!!!!! Iden@fica- se hotspots, e o local destes, movendo o rato sobre a imagem A caixa de status do browser mostra o URL do link correspondente à região 20
Mapa de Imagem do lado do Servidor Forma de um mapa de imagem do lado do servidor usando um programa CGI para processar o pedido: <a href="path/to/cgi > <img ismap src="image.jpg" border="0"... > </a>! O path to cgi é o URL do programa CGI que irá receber a localização de pixel quando o usuário clica num ponto da imagem. Quando o rato está sobre a imagem, vê- se algo parecido com o seguinte na caixa de status do browser:!http://www.ubi.pt/cgi-bin/imagemap.cgi?298,42 Esta é a sintaxe do browser para invocar um programa CGI usando o método GET. Tudo até o ponto de interrogação é o URL do CGI. O texto seguinte à interrogação são os dados que vão ser enviados para o CGI, neste caso, as coordenadas do pixel clicado pelo rato. Dica: isto pode ser usado como uma técnica simples para descobrir os locais de pixels de pontos numa imagem quando se constrói um mapa do lado do cliente: fazer a imagem temporariamente um mapa do lado do servidor, e ler as coordenadas de qualquer ponto escolhido na caixa de status. No exemplo acima, o par 298,42 é a localização x, y do rato no momento. 21
Tabelas Tables should not be used purely as a means to layout document content as this may present problems when rendering to non- visual media. Addi9onally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables. W3C Atenção que nem todos os visitantes a uma página irão usar o mesmo hardware e so ware para ver a página.
E@quetas para Tabelas Uma tabela organiza o conteúdo numa grelha de linhas horizontais e colunas ver@cais A área da tabela é englobada pelas e@quetas <table>... </table>! Uma linha da tabela começa por <tr> (e@queta de fim é opcional). Dentro de cada linha, um item numa coluna da tabela começa por <td> (e@queta de fim é opcional). Usar <th> no seu lugar, para os headings (cabeçalhos) da coluna.
Atributos da Tabela (de <table>) Atributo Valor Descrição bgcolor Rgb(x,y,z) Especifica a côr de fundo (background) da tabela #xxyyzz nome da côr em inglês align Le, Center, right Especifica o alinhamento da tabela de acordo com o frame void, above, below, hsides, vsides, box, border, lhs, rhs texto envolvente Especifica que partes da moldura exterior devem ser visiveis border pixels Especifica largura da moldura desenhada ao redor da tabela, de acordo com o valor numérico de pixels. Um valor de 0 elimina a moldura. width pixels, % Especifies a largura da tabela. Pode ser dado um valor absoluto em pixels, ou em alterna@vo uma percentagem em função da largura da janela. summary text Fornece uma descrição da tabela (tal como o seu propósito e estrutura parau@lizadores invisuais (e.g. speech) sortable sortable Especifica que a tabela deve ser classificável/ ordenável rules none, groups, rows, cols, all Especifica quais as partes das molduras internas devem ser visiveis. cellspacing pixels Especifica o espaço entre células (em cima, baixo, e para cada lado) cellpadding space Especifica o espacamento entre os contornos da célula e o seu conteúdo. O valor space é dado sob a forma de número de pixels, ou como percentagem do tamanho da célula. Nota: Desta lista de atributos, apenas o atributo sortable é suportado no HTML5. 25
Formatação de Tabelas - Visualização Es@los de molduras (atributos de tabela border, frame, e rules) Alinhamentos horizontais e ver@cais Margens de células 26
Células que atravessam linhas, colunas Uma célula pode atravessar mul@plas linhas ou colunas Através do uso dos atributos rowspan e colspan dos elementos <th> ou <td> Exemplo: <td colspan="2">this cell spans two columns</td>! Exemplo: <td rowspan="2">this cell spans two rows</td>! Pode- se também usar o atributo nowrap para controlar automa@camente o wrapping do texto dentro da célula. Normalmente é bom fazer o wrapping de modo a evitar que a célula alargue demasiado.
Elementos dentro da Tabela CapCon: especifica uma cap@on que aparece juntamente com a tabela Permite um atributo opcional, align, para especificar onde a cap@on deverá aparecer rela@vamente à tabela A posição de align pode ser: top bottom left right! <caption align="position">this is the caption</caption>!
Exemplo 29
Grupos de linhas dentro da Tabela Grupos de linhas: permitem estruturar partes da tabela em head, body, e foot. <thead>... </thead> engloba linhas no cabeçalho (head) da tabela <tfoot>... </tfoot> engloba linhas no pé (foot) da tabela <tbody>... </tbody> engloba linhas no corpo da tabela. Notar que <tfoot> deve aparecer antes de <tbody> de modo que o browser possa fazer o scroll do corpo independentemente do head e do foot, ou repe@r head e foot nos casos de impressão mul@- página Mul@plos elementos <tbody> são permi@dos, de modo a dividir o body em grupos de linhas. As e@quetas de fecho são opcionais
Grupos de colunas dentro da Tabela Permitem especificar largura (width) e alinhamento (alignment) das colunas na tabela Ú@l para aplicar styles para grupo de colunas, em vez de coluna a coluna, usando a e@queta col <colgroup> <col align="alignment" width="width" span= ncols > <col valign="vert-alignment" span="cols">... </colgroup>! Alignment é um de: left center right justify! vert- alignment é um de: top middle bottom baseline! width pode ser um número de pixels ou uma percentagem da largura da tabela ncols é o número de colunas que par@lham os mesmos atributos Nota: A e9queta <colgroup> deve estar dentro de um elemento <table>, depois de <cap9on> se este exis9r, e antes dos elementos <thead>, <tbody>, <Poot> e <tr>
Exercicio de Tabelas 32
Solução do Exercicio 33
Âncoras (Anchors) A e@queta <a> pode ser usada para criar uma âncora, i.e., uma localização marcada no documento HTML de modo a poder saltar- se de uma parte do documento para a parte sinalizada com a âncora. o nome da âncora é dado pelo atributo name. Assim, para criar âncora: <a name="section1">section 1.</a>! Um link refere- se à localização através do nome usando o caractér # no URL. Clicando no link salta- se para a localização marcada em vez de se ir para o topo do documento referenciado O URL que referencia uma âncora (anchor) loca@zada no mesmo documento pode omi@r tudo excepto o # e o nome da âncora. Ou, o URL pode ser rela@vo ou absoluto com o #anchorname no final. Para referenciar âncora <a href="#section1">see Section 1.</a>! ou <a href="http://www.mysite.org/pubs/paper.html#section1"> See Section 1 of the paper.</a>! 35
Exemplo com Âncoras 36
Quadros (Frames) O uso de frames permite que a um browse exibir mais do que uma página web na mesma janela simultaneamente. Normalmente as frames são usadas para fornecer elementos de navegação ou logó@pos que permanecem fixos enquanto as principais mudanças ocorrem na área de conteúdo. Frames são introduzidos u@lizando o elemento <frameset> A e@queta <frame> define uma determinada janela (frame) que contém uma página html, dentro de um <frameset>. Cada <frame> num <frameset> pode ter diferentes atributos, como fronteira, scrolling, redimensionamento, etc Para uma página conter frames, deve definir o <!DOCTYPE> como "HTML Frameset DTD" ou "XHTML Frameset DTD". A página que tem um elemento <frameset> não pode ter um elemento <body>. O elemento <frameset> de uma página que usa frames subs@tui o <body> de uma página que não usa frames. Frames, i.e., e@quetas <frame> e <frameset>, não são suportadas no HTML5! 38
Estrutura geral de página com frames <html>! <head>!... (parte do cabeçalho) </head>! <frameset>! <frame name= nome da frame1" src="frame1-url">! <frame name= nome da frame2" src="frame2-url">!... <noframes>!... (material para browsers que não reconhecem frames) </noframes>! </frameset>! </html>!
A e@queta <noframes> Older browsers may not support frames. Such browsers will not see a document body and will display a blank page. To avoid this, use the <noframes> tag to provide content for these older browsers. The tag is, of course, unknown to such browsers, so they will ignore it. You can place a short document body within this area and it will be displayed by these browsers. Frame- aware browsers ignore all content between <noframes> tags. The noframes content should be placed inside a <body> element because some browsers will not display content that is not in a document body. 40
Atributos de <frame> Elimina o rolar (scrolling) da janela Margens da frame Uso de noframes 41
Atributos de <frameset> The <frameset> tag normally has one aˆribute that defines the spacing of the frames either horizontally or ver@cally on the screen. For example: <frameset rows= 70%,*"> especifica that there are two frames in the frameset side by side, the first occupying 20% of the width of the window, and the other occupying the balance. Each frame extends the en@re height of the window. <frameset rows="50,120,*"> specifies that there are three frames in the frameset, one above the other. The first occupies 50 pixels of height, the next 100 pixels, and the last takes up all the rest of the available ver@cal space. Each frame extends the en@re width of the window. If both rows and cols aˆributes are specified, then the frames are laid out in a grid. 42
Encadeamento de Framesets One frameset can be nested inside another. This allows more complicated layouts than horizontal @les, ver@cal @les, or a grid. The nested frameset occupies the space where otherwise a single frame of the enclosing frameset would go. 43
Encadeamento de Framesets Frame le - up Frame right Frame le - down One frameset can be nested inside another. This allows more complicated layouts than horizontal @les, ver@cal @les, or a grid. The nested frameset occupies the space where otherwise a single frame of the enclosing frameset would go. 44
Nomes target Especiais O atributo target de um link numa frame pode ter um dos seguintes valores especiais: _blank abre o target URL numa nova janela ou separador do browser _self abre o target URL na mesma frame que a âncora (subs@tuindo o conteúdo da frame). _top abre o target URL em toda a janela do browser (subs@tuindo todas as frames). _parent abre o target URL na parent frame _top abre o target URL em toda a janela do browser framename abre o target URL na frame nomeada Linking Between Frames Very o en it is desired for a link located in one frame to open in another frame. This is achieved using the target aˆribute in the link element: <a href="url" target="frame-name">link text.</a>! When the link text is clicked, the URL will be opened in the frame whose name aˆribute is frame- name. The frame containing this link will remain in place. 45
Fixed- Dynamic Frames: Exercise 46
Resolução do Exercicio de Frames 47
Resultado das Páginas Web Target= _self 48