HTML Básico João Araujo.

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 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 <html>: 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. <head>: Define o cabeçalho de um documento HTML. Este cabeçalho traz informações sobre o documento que está sendo aberto. <body>: 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 "<head>") podemos encontrar:
<title>: 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)
<!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 "> <meta name="author" content="Joao Araujo"> <title>Mestrado em Geomatica</title> <link href="estilosnew.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="mestrado.js" language="JavaScript"> </script> </head> <body> ... </body> </html>

Corpo Dentro do corpo (tag "<body>") podemos encontrar outras várias tags, como por exemplo: <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. <p>: novo parágrafo. <br>: quebra de linha. <table>:cria uma tabela (linhas são criadas com <tr> e novas células com <td>). <div>: determina uma divisão na página.. <img>: imagem. <a>: hiperlink para uma página, ou para um endereço de .

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. <link href="estilosnew.css" rel="stylesheet" type="text/css">

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 <aluno id="adrianaa">
<nome>Adriana dos Santos Aparício</nome> <anoingresso>2001</anoingresso> <dissertacao>Ontologias, Uma Alternativa para Integração de Bases de Dados Heterogêneas.</dissertacao> <dataseminario> </dataseminario> <orientador>Oscar Luiz Monteiro de Farias, D.Sc., UERJ</orientador> <coorientador>Neide dos Santos, D.Sc., UERJ</coorientador> <apresentouseminario>sim</apresentouseminario> </aluno>

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 <xs:element name="aluno"> <xs:complexType>
<xs:sequence> <xs:element ref="nome"/> <xs:element ref="anoingresso"/> <xs:element ref="situacao"/> <xs:element minOccurs="0" ref="dissertacao"/> <xs:element minOccurs="0" ref="endereco"/> <xs:element minOccurs="0" ref="dataseminario"/> <xs:element minOccurs="0" ref="datadefesa"/> <xs:element minOccurs="0" ref="orientador"/> <xs:element minOccurs="0" ref="coorientador"/> <xs:element minOccurs="0" maxOccurs="10" ref="banca"/> <xs:element minOccurs="0" ref="apresentouseminario"/> <xs:element minOccurs="0" maxOccurs="unbounded" ref="paragraforesumo"/> </xs:sequence> <xs:attribute name="id" use="required"/> </xs:complexType> </xs:element>

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 <xsl:for-each select="aluno">
<xsl:sort select="dataseminario" order="descending"/> <xsl:variable name="novadata"> <xsl:value-of select="dataseminario"/> </xsl:variable> <xsl:if test="substring($novadata, 1, 4)='2005'"> <xsl:choose>

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. <FORM ACTION="URL_de_script" METHOD=método>...</FORM>

Atributos de <form>
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 <form>
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.

<form> 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: <INPUT>, <SELECT> e <TEXTAREA>

Campo Input O campo <INPUT> tem um atributo TYPE, ao qual atribuímos seis valores diferentes para gerar tipos diferentes de entrada de dados. Campo de dados texto: <INPUT TYPE=TEXT... Campo de dados senha: <INPUT TYPE=PASSWORD... Múltipla escolha: <INPUT TYPE=CHECKBOX... Escolha única: <INPUT TYPE=RADIO... Botões de ação: <INPUT TYPE=SUBMIT> Reset: <INPUT TYPE=RESET> hidden: <INPUT TYPE=HIDDEN>

Type=Text Produz: Insere espaço para digitação de texto.
Nome: <INPUT TYPE=TEXT NAME="Nome"> Produz:

Type=Password Password: <INPUT TYPE=PASSWORD NAME="senha">
Insere espaço para digitar password portegida por asteriscos Login: <INPUT TYPE=TEXT NAME=login><br> Password: <INPUT TYPE=PASSWORD NAME="senha"> Produz:

Type=CHECKBOX Insere um botão para escolha de opções
<p>Qual a camada?</p> <INPUT TYPE=CHECKBOX NAME="feicao" VALUE="aeroportos">Aeroportos <br> <INPUT TYPE=CHECKBOX NAME="feicao" VALUE="municipios">Municípios <br> <INPUT TYPE=CHECKBOX NAME="feicao" VALUE="rios">rios

Produz

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" <INPUT TYPE=CHECKBOX NAME="feicao" VALUE="municipios" CHECKED>Municípios <br>

RADIO Determina que somente pode ser escolhida uma opção:
<INPUT TYPE=RADIO NAME="feicao" VALUE="aeroportos">Aeroportos <br> <INPUT TYPE=RADIO NAME="feicao" VALUE="municipios" CHECKED Municípios <br> <INPUT TYPE=RADIO NAME="feicao" VALUE="rios">rios Produz

SUBMIT <INPUT TYPE=SUBMIT VALUE="Enviar"> Produz:
Mostra um botão que permite o envio de dados para o servidor: <INPUT TYPE=SUBMIT VALUE="Enviar"> Produz:

Reset RESET restaura os valores iniciais das entradas de dados.
<INPUT TYPE=RESET VALUE="Valores Iniciais"> Produz:

Hidden Permite colocar entradas que não mostradas, mas que são enviadas ao servidor <INPUT TYPE=hidden name="layer" value="countries">

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

SELECT <SELECT name="feicao">
Também podemo pré-selecionar;: <SELECT name="feicao"> <OPTION>Aeroporto</OPTION> <OPTION SELECTED>Municípios</OPTION> <OPTION>Rios</OPTION> </SELECT>

Produz

SELECT <SELECT name="feicao">
Apresenta uma lista de valores: <SELECT name="feicao"> <OPTION>Aeroporto</OPTION> <OPTION>Municípios</OPTION> <OPTION>Rios</OPTION> </SELECT>

Produz

SELECT com SIZE <SELECT name="feicao" SIZE=2>
Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados <SELECT name="feicao" SIZE=2> <OPTION>Aeroporto</OPTION> <OPTION>Municípios</OPTION> <OPTION>Rios</OPTION> </SELECT>

Produz

SELECT Múltiplo <SELECT name="feicao" SIZE=2 MULTIPLE>
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): <SELECT name="feicao" SIZE=2 MULTIPLE> <OPTION>Aeroporto</OPTION> <OPTION>Municípios</OPTION> <OPTION>Rios</OPTION> </SELECT>

Produz

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. <TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA>

Produz

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.

HTML Básico João Araujo.

Apresentações semelhantes

Apresentação em tema: "HTML Básico João Araujo."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

HTML Básico João Araujo.

Apresentações semelhantes

Apresentação em tema: "HTML Básico João Araujo."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback