A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

HTML Básico João Araujo. O que é HTML HTML (HyperText Markup Language) é uma linguagem de marcação usada para apresentar informação na Web usando o protocolo.

Apresentações semelhantes


Apresentação em tema: "HTML Básico João Araujo. O que é HTML HTML (HyperText Markup Language) é uma linguagem de marcação usada para apresentar informação na Web usando o protocolo."— Transcrição da apresentação:

1 HTML Básico João Araujo

2 O que é HTML HTML (HyperText Markup Language) é uma linguagem de marcação usada para apresentar informação na Web usando o protocolo http.

3 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.

4 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

5 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.

6 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. : Define formatação em CSS. : Define programação de certas funções em página com scripts, e pode colocar funções de JavaScript. : Define ligações da página com outros arquivos como feeds, CSS, scripts, etc. : Define propriedades da página, como codificação de caracteres, descrição da página, autor, etc.

7 Exemplo (Página da Geomática) Mestrado em Geomatica...

8 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.

9 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.

10 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.

11 Exemplo h1 { font-family:"century gothic",serif; font-size:24pt; color:#4D9FFF; font-weight:normal; margin-bottom:2pt; }

12 Mas... Mesmo com CSS o HTML ainda mantinha um pouco da formatação inserida junto com a informação.

13 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

14 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.

15 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

16 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.

17 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.

18 Exemplo

19 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.

20 Exemplo

21 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)

22 HTML e Mapserver No curso vamos usar o HTML versão 4.01. Com algumas poucas tags podemos apresentar um mapa na Web.

23 Tags HTML para Mapserver Precisamos de formulários para enviar os pedidos para o cgi do mapserver....

24 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.

25 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.

26 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:, e

27 Campo Input O campo tem um atributo TYPE, ao qual atribuímos seis valores diferentes para gerar tipos diferentes de entrada de dados. Campo de dados texto: { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com.br/3/1352718/slides/slide_27.jpg", "name": "Campo Input O campo tem um atributo TYPE, ao qual atribuímos seis valores diferentes para gerar tipos diferentes de entrada de dados.", "description": "Campo de dados texto:

28 Type=Text Insere espaço para digitação de texto. Nome: Produz:

29 Type=Password Insere espaço para digitar password portegida por asteriscos Login: Password: Produz:

30 Type=CHECKBOX Insere um botão para escolha de opções Qual a camada? Aeroportos Municípios rios

31 Produz

32 Também podemos pré-selecionar: Uma diretiva CHECKED marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida" Municípios

33 RADIO Determina que somente pode ser escolhida uma opção: Aeroportos rios Produz

34 SUBMIT Mostra um botão que permite o envio de dados para o servidor: Produz:

35 Reset RESET restaura os valores iniciais das entradas de dados. Produz:

36 Hidden Permite colocar entradas que não mostradas, mas que são enviadas ao servidor

37 Além do campo INPUT Também temos a nossa disposição o SELECT e o TEXTAREA.

38 SELECT Também podemo pré-selecionar;: Aeroporto Municípios Rios

39 Produz

40 SELECT Apresenta uma lista de valores: Aeroporto Municípios Rios

41 Produz

42 SELECT com SIZE Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados Aeroporto Municípios Rios

43 Produz

44 SELECT Múltiplo Com o atributo MULTIPLE, define-se que se pode selecionar mais de um item (pressionando a tecla Shift do teclado enquanto se selecionam os itens): Aeroporto Municípios Rios

45 Produz

46 TEXTAREA Abre uma área para entrada de texto, de acordo com atributos para número de colunas, linhas, e - se for o caso - um valor inicial. Deixe seu comentário

47 Produz

48 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.

49 Fim


Carregar ppt "HTML Básico João Araujo. O que é HTML HTML (HyperText Markup Language) é uma linguagem de marcação usada para apresentar informação na Web usando o protocolo."

Apresentações semelhantes


Anúncios Google