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

: 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:

...

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 com

). : determina uma divisão na página.. e novas células : 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 para páginas web. ou CSS são estilos 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 simplicidade de HTML de SGML com a ● 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 não na sua aparência. da informação e 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 desenvolvida pela OGC é uma sintaxe XML 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: , e </p> <a id="p27" href="#"></a> <h3>Campo Input</h3> <p>O campo <INPUT> tem um atributo TYPE , ao qual atribuímos seis valores diferentes para gerar tipos diferentes de entrada de dados.</p> <p>Campo de dados texto: <INPUT TYPE=TEXT...</p> <p>Campo de dados senha: <INPUT TYPE=PASSWORD...</p> <p>Múltipla escolha: <INPUT TYPE=CHECKBOX...</p> <p>Escolha única: <INPUT TYPE=RADIO...</p> <p>Botões de ação: <INPUT TYPE=SUBMIT> Reset: <INPUT TYPE=RESET> hidden: <INPUT TYPE=HIDDEN></p> <a id="p28" href="#"></a> <h3>Type=Text</h3> <p>Insere espaço para digitação de texto.</p> <p>Nome: < INPUT TYPE= TEXT NAME="Nome"> Produz:</p> <a id="p29" href="#"></a> <h3>Type=Password</h3> <p>Insere espaço para digitar password portegida por asteriscos Login: <INPUT TYPE=TEXT NAME=login><br> Password: <INPUT TYPE=PASSWORD NAME="senha"> Produz:</p> <a id="p30" href="#"></a> <h3>Type=CHECKBOX</h3> <p>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</p> <a id="p31" href="#"></a> <h3>Produz</h3> <a id="p32" href="#"></a> <h3>Também podemos pré-selecionar:</h3> <p>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></p> <a id="p33" href="#"></a> <h3>RADIO</h3> <p>Determina que somente pode ser escolhida uma opção: <INPUT TYPE=RADIO NAME="feicao" VALUE="aeroportos">Aeroportos <br> <INPUT TYPE=RADIO VALUE="municipios" NAME="feicao" CHECKED Municípios <br> <INPUT TYPE=RADIO VALUE="rios">rios NAME="feicao" Produz</p> <a id="p34" href="#"></a> <h3>SUBMIT</h3> <p>Mostra um botão que permite o envio de dados para o servidor: <INPUT TYPE=SUBMIT VALUE="Enviar" > Produz:</p> <a id="p35" href="#"></a> <h3>Reset</h3> <p>RESET restaura os valores iniciais das entradas de dados. <INPUT TYPE=RESET VALUE="Valores Iniciais"> Produz:</p> <a id="p36" href="#"></a> <h3>Hidden</h3> <p>Permite colocar entradas que não mostradas, mas que são enviadas ao servidor <INPUT TYPE=hidden name="layer" value="countries "></p> <a id="p37" href="#"></a> <h3>Além do campo INPUT</h3> <p>Também temos a nossa disposição o SELECT e o TEXTAREA.</p> <a id="p38" href="#"></a> <h3>SELECT</h3> <p>Também podemo pré-selecionar;: <SELECT name="feicao"> <OPTION> Aeroporto </OPTION> <OPTION SELECTED> Municípios </OPTION> <OPTION> Rios </OPTION> </SELECT></p> <a id="p39" href="#"></a> <h3>Produz</h3> <a id="p40" href="#"></a> <h3>SELECT</h3> <p>Apresenta uma lista de valores: <SELECT name="feicao"> <OPTION> Aeroporto </OPTION> <OPTION> Municípios </OPTION> <OPTION> Rios </OPTION> </SELECT></p> <a id="p41" href="#"></a> <h3>Produz</h3> <a id="p42" href="#"></a> <h3>SELECT com SIZE</h3> <p>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></p> <a id="p43" href="#"></a> <h3>Produz</h3> <a id="p44" href="#"></a> <h3>SELECT Múltiplo</h3> <p>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></p> <a id="p45" href="#"></a> <h3>Produz</h3> <a id="p46" href="#"></a> <h3>TEXTAREA</h3> <p>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.</p> <p><TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário 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 Directory ×