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=ISO8859-1">
<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 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.
<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>2004-10-27</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
Insere espaço para digitação de texto.
Nome: <INPUT TYPE=TEXT NAME="Nome">
Produz:
Type=Password
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
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
Também podemo pré-selecionar;:
<SELECT name="feicao">
<OPTION>Aeroporto</OPTION>
<OPTION SELECTED>Municípios</OPTION>
<OPTION>Rios</OPTION>
</SELECT>
Produz
SELECT
Apresenta uma lista de valores:
<SELECT name="feicao">
<OPTION>Aeroporto</OPTION>
<OPTION>Municípios</OPTION>
<OPTION>Rios</OPTION>
</SELECT>
Produz
SELECT com SIZE
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
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.
Fim
Download
