~~SLIDESHOW~~ ====== HTML, XHTML e XML ====== ==== Noções Básicas para uso com Mapserver ==== === João Araujo Ribeiro === == Pós-Graduação em Engenharia de Computação - Geomática == ---- Para ver esta apresentação em slides, clique no ícone acima à direita da página ===== O que é HTML ===== **HTML (HyperText Markup Language)** é uma linguagem de marcação usada para apresentar informação na Web usando o protocolo **http**. ===== O que é uma linguagem de marcação ===== Uma linguagem de marcação é um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos. ===== Tags ===== O HTML utiliza etiquetas, marcações que são conhecidas como **Tags**, que consistem em breves instruções tendo uma marca de início e outra de fim. Estas tags determinam a formatação do texto, imagens e demais elementos que compõem uma página HTML. Em HTML as tags iniciam com símbolo **<** e terminam com o símbolo **>** ===== Tags Básicas ===== * ****: Define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. < * ****: Define o cabeçalho de um documento HTML. Este cabeçalho traz informações sobre o documento que está sendo aberto. < * ****: Define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, entre outras formatações. < ===== Cabeçalho ===== Dentro do cabeçalho (tag "") podemos encontrar: * : Define o título da página, que é exibido na barra de título dos browsers. < * <style>: Define formatação em CSS. < * <script>: Define programação de certas funções em página com scripts, e pode colocar funções de JavaScript. < * <link>: Define ligações da página com outros arquivos como feeds, CSS, scripts, etc. < * <meta>: Define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. < ===== Exemplo (Página da Geomática) ===== <code html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="shortcut icon" href="favicon2.ico"> <meta http-equiv="Content-Type" Content="text/html; charset=ISO-8859-1"> <meta name="author" content="Joao Araujo"> <title>Mestrado em Geomatica ... ===== Corpo ===== Dentro do corpo (tag "") podemos encontrar outras várias tags, como por exemplo: *

,

,...

: cabeçalhos e títulos no documento em diversos tamanhos. < *

: novo parágrafo. < *
: quebra de linha. < * :cria uma tabela (linhas são criadas com e novas células com
). < *
: determina uma divisão na página. < * : imagem. < * : hiperlink para uma página, ou para um endereço de E-mail. < ===== Problemas de HTML ===== * **Linguagem limitada**: tags são pré-definidas. Não há como criar tags novas que o navegador possa entender. * Não existe separação entre conteúdo e formatação. A tag define o formato. * As pessoas começaram a usar o recurso de tabelas para definir o layout de uma página. * Praticamente impossível de manter (ou alterar) a unidade visual de um site de várias páginas. < ===== CSS ===== * Cascading Style Sheets ou CSS são estilos para páginas web. * Possibilitam a mudança da aparência simultânea de todas as páginas relacionadas com o mesmo estilo. * . < ===== Exemplo ===== h1 { font-family:"century gothic",serif; font-size:24pt; color:#4D9FFF; font-weight:normal; margin-bottom:2pt; } ===== Mas... ===== Mesmo com **CSS**, o **HTML** ainda mantinha um pouco da formatação inserida junto com a informação. ===== XML ===== * **XML (eXtensible Markup Language)** é uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais. * **XML** é um subtipo de **SGML** (Standard Generalized Markup Language - Linguagem Padronizada de Marcação Genérica). * Combina a flexibilidade de **SGML** com a simplicidade de **HTML.** < ===== Objetivos ===== * Separação do conteúdo e da formatação, * legibilidade tanto por humanos quanto por máquinas, * possibilidade de criação de tags sem limitação, * criação de arquivos para validação de estrutura, * com seu uso pode-se interligar bancos de dados distintos, * Simplicidade, * XML concentra-se na estrutura da informação e não na sua aparência. < ===== Exemplo ===== Adriana dos Santos Aparício 2001 Ontologias, Uma Alternativa para Integração de Bases de Dados Heterogêneas. 2004-10-27 Oscar Luiz Monteiro de Farias, D.Sc., UERJ Neide dos Santos, D.Sc., UERJ sim ===== Derivações de XML ===== XML serve para definir outras linguagens de marcação, por exemplo: * XHTML: O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML. * GML: Geography Markup Language é uma sintaxe XML desenvolvida pela OGC para descrever feições geográficas. * DOCBOOK: uma linguagem de marcação para autoria de documentos. < ===== Sopa de letrinhas ===== **XSD**: **XML Schema Definition (XSD)** . Define um tipo de documento XML de acordo com certas restrições sobre quais elementos e atributos podem aparecer, suas relações, os tipos de dados que podem conter. Também pode ser usado para validar um arquivo XML. ===== Exemplo ===== ===== XSL ===== **XSL (eXtensible Stylesheet Language)** é uma família de linguagens do W3C definindo transformações em documentos XML. A que nos interessa é a **XSLT - Extensible Stylesheet Language Transformations**. ===== Exemplo ===== ===== XHTML ===== * O **XHTML**, ou **eXtensible Hypertext Markup Language**, é uma reformulação da linguagem de marcação HTML baseada em XML. Combina as tag's de marcação **HTML** com regras da **XML** (mais rígidas) * Enquanto HTML é uma aplicação da SGML, XHTML é uma aplicação da XML. * XHTML não é a “versão atual” de HTML. Enquanto HTML está na versão 4.01, XHTML está na versão 1.1 (com a 2.0 em draft). < ===== HTML e Mapserver ===== No curso vamos usar o HTML versão 4.01. Com algumas poucas tags podemos apresentar um mapa na Web. ===== Tags HTML para Mapserver ===== Precisamos de formulários para enviar os pedidos para o cgi do mapserver. //
...
// ===== Atributos de
===== * **ACTION** - Especifica o URL do script ao qual serão enviados os dados do formulário. No nosso caso action="/cgi-bin/mapserv" * **METHOD** - Seleciona um método para acessar o URL de ação. < ===== Métodos de ===== Os métodos de form transferem dados do cliente para o sevidor. Podem ser: * **POST** - os dados entrados fazem parte do corpo da mensagem enviada para o servidor - transfere grande quantidade de dados. * **GET** - os dados entrados fazem parte do URL (endereço) associado à consulta enviada para o servidor - suporta até 128 caracteres. ===== ===== Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Para entrada de dados podemos usar 3 campos: **, ===== Produz ===== {{:sigweb:textarea.gif|Textarea}} ===== CGI ===== **CGI**, ou **Common Gateway Interface**, é uma interface definida de maneira a possibilitar a execução de programas - "**gateways**" - sob um servidor HTTP Neste contexto, os "**gateways**" são programas ou scripts (também chamados "**cgi-bin**") que recebem requisições de informação, retornando um documento com os resultados correspondentes. ===== Fim =====