HTML - Hyper Text Markup Language (Linguagem

HTML - Hyper Text Markup Language
(Linguagem de Formatação de Hipertexto)
Avançado
Fonte: www.rayel.org/2.HTMLAvancado.ppt
Tabelas

A manipulação de tabelas, mesmo em editores, é trabalhosa;
a maior diferença entre tabelas em HTML e em editores como
o MS Word, entretanto, é o fato das tabelas em HTML serem
definidas apenas em termos de linhas e não de colunas. Mas
isso será percebido no decorrer destas páginas.

Tabelas implementam um conceito importante de layout: as
“grades”, segundo as quais organizamos textos e ilustrações
de maneira harmoniosa.

Como já foi possível perceber, as tabelas contêm textos,
listas, parágrafos, imagens, formulários e várias outras
formatações - inclusive outras tabelas.
Elementos básicos de tabelas

<TABLE>...</TABLE> delimita uma tabela.

<CAPTION>...</CAPTION> define o título da tabela

<TR>...</TR> delimita uma linha

<TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>)

<TD>...</TD> delimita um elemento ou célula (dentro de <TR>)

Uma tabela simples:

<TABLE BORDER=4>

<CAPTION>Primeiro exemplo</CAPTION>

<TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR>

<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>

<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>

</TABLE>
Elementos básicos de tabelas

Células compreendendo mais de uma coluna ou linha

É possível englobar colunas e linhas, através dos
atributos COLSPAN (para colunas) e ROWSPAN (para
linhas):

<TABLE BORDER=1>

<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>

<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>

<TR><TD colspan=”2”>duas colunas</TD></TR>

</TABLE>
Alinhamentos em tabelas

As linhas e células podem ter alinhamentos definidos através dos
atributos:

<TD ALIGN=alin_horizontal>Texto da célula</TD>

<TD VALIGN=alin_vertical>Texto da célula</TD>

ALIGN=LEFT

ALIGN=CENTER

ALIGN=RIGHT

VALIGN=TOP

VALIGN=MIDDLE

VALIGN=BOTTOM
Atributos de largura

Para apresentar uma tabela ocupando determinado espaço disponível na
linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a
linhas e células.

Tabela ocupando 50% do espaço disponível, com uma coluna de 60% do
espaço disponível na tabela

<TABLE BORDER=1 width=50%>

<TR>

<TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>março</TD>

</TR>

<TR>

<TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD>

</TR>

</TABLE>
Atributos de espaçamento

Dois atributos permitem o controle de espaçamento
em tabelas:

CELLPADDING - espaço entre o texto e as bordas
da célula

CELLSPACING - espaço entre células

Ex.1: Espaço entre o texto e as bordas

<TABLE BORDER=1 CELLPADDING=20>

Ex.2: Espaço entre células

<TABLE BORDER=1 CELLSPACING=20>
Extensões de tabelas

Cor de fundo

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10
BGCOLOR="#E1FFD9">

<TD BGCOLOR="#E1FFD9">

Cor de borda

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10
BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">

Imagem de fundo

<TD BACKGROUND="imagem">
Frames

Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, torna-se
possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte
pequena da tela, e os textos relacionados ao índice em outra parte.

Nem todos os usuários gostam de frames, pois nem sempre a navegação é fácil, além de
problemas para a impressão e a marcação dos documentos interiores aos frames nos
bookmarks. A alternativa natural para os frames são as tabelas.

<FRAMESET COLS="20%, 80%">

<FRAME SRC="indice1.html">

<FRAME SRC="apresenta.html" NAME="principal">

<NOFRAME>

<BODY>

<H2>Bem-vindo à página do assunto X!</h2>

</BODY>

</NOFRAME>

</FRAMESET>
Links com Frames

Sempre que se aciona um link dentro de uma página, o default (isto é, o
comportamento padrão) é que a página referente a esse link seja carregada
na mesma janela da página anterior.

No exemplo visto com frames, seguir um link dentro da janela à direita faz
com que a página apontada seja mostrada ocupando a janela da direita
(coluna de 80%):

Veja no código que o frame associado a apresenta.html tem um atributo
NAME. Nomear um frame permite que direcionemos o frame em que será
apresentado o documento de destino de um link. No exemplo visto, o
arquivo indice1.html tem um link da seguinte forma:

<a href="apresenta2.html" target=principal>Exemplo nº.2</a>.

Isto indica que se está definindo (pelo atributo target) o frame em que a
página de destino do link (apresenta2.html) será mostrada.
Composição com Frames
Dois frames em coluna
<FRAMESET COLS="x, y">

<FRAME SRC="col1.html">
</FRAMESET>
Dois frames em linha
<FRAMESET ROWS="x, y">

<FRAME SRC="lin1.html">
</FRAMESET>
Composição com Frames
Tres frames

</FRAMESET>
</FRAMESET>
Tres Frames

</FRAMESET>
</FRAMESET>
Atributos de Frames

Até este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME
(para FRAME).

Eliminação das bordas dos frames:

<FRAMESET COLS="20%, 80%" FRAMEBORDER="no">

<FRAME SRC="indice4.html">

<FRAME SRC="apresenta4.html" NAME="principal">

</FRAMESET>

Frame sem barra de rolagem:

<FRAMESET COLS="20%, 80%">

<FRAME SRC="indice4.html" SCROLLING="no">

<FRAME SRC="apresenta4.html" NAME="principal">

</FRAMESET>
Aplicações de Frames e Cuidados

Frames são interessantes para apresentar
conjuntos de páginas com um índice fixo para a
navegação. Além disso, torna-se possível
mostrar diversas páginas e/ou mídias em uma
única janela do browser.

Um cuidado é procurar controlar bem a
navegação, evitando que o acionamento de links
não leve o leitor a ver seu browser criar frames
dentro de frames, gerando uma grande confusão
(veja item seguinte, sobre "limpar" a tela).
Limpando a tela

Há basicamente dois efeitos possíveis para limpar a
apresentação de frames, e isso é feito com "targets"
especiais (o atributo TARGET foi apresentado no item
Links com frames):

TARGET="_top" limpa os frames que estiverem ativos,
apresentando a página de destino na tela inteira

TARGET="_blank" abre uma nova janela do browser
para apresentar a página de destino
Formulários

Um formulário é um modelo para a entrada de um conjunto de
dados. O primeiro passo para fazer formulários é aprender as
etiquetas que desenham as janelinhas de entrada de dados, para
depois trabalharmos com os scripts, que são os programas que
tratam esses dados, oferecendo os serviços desejados (acesso a
banco de dados, envio de e-mail, etc.).

O elemento <FORM> delimita um formulário e contém uma
seqüência de elementos de entrada e de formatação do documento.

<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.

METHOD - Seleciona um método para acessar o URL de ação. Os métodos usados
atualmente são GET e POST. Ambos os métodos transferem dados do browser para o
servidor, com a seguinte diferença básica:

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.

ENCTYPE - Indica o tipo de codificação dos dados enviados através do formulário. O tipo
default é application/x-www-form-urlencoded. Outro tipo aceito por alguns browsers é
text/plain.

Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens -
exceto outros formulários. Em especial, colocamos dentro da marcação de <FORM> as
formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e
<TEXTAREA>.

Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um
nome, que será utilizado posteriormente pelo script. São os scripts que organizam esses
dados de entrada em um conjunto de informações significativas para determinado propósito.
Input

O campo <INPUT> tem um atributo TYPE, ao qual
atribuímos seis valores diferentes para gerar seis tipos
diferentes de entrada de dados.

Campo de dados texto

Quando INPUT não apresenta atributos, é assumido que
TYPE=TEXT (default); a formatação:

Nome: <INPUT TYPE=TEXT NAME="Nome">
Campo de dados senha

Entrada de texto na qual os caracteres
são escondidos por asteriscos, como se
pode ver no exemplo.

Login: <INPUT TYPE=TEXT NAME=login><br>

Password: <INPUT TYPE=PASSWORD NAME="senha">
Atributos de Campos

Alguns atributos para os campos de tipo TEXT e PASSWORD

VALUE pode ser usado para dar um valor inicial a um campo de tipo texto
ou senha. Desse modo, se o usuário não preencher este campo, será
adotado este valor padrão. Se o usuário quiser entrar dados, ele
simplesmente apaga o que já estiver escrito e escreve suas informações.

Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">

SIZE especifica o tamanho do espaço no display para o campo do
formulário. Só é válido para campos TEXT e PASSWORD. O valor default
(padrão) é 20.

Endereço: <INPUT TYPE=TEXT SIZE=35>

MAXLENGHT é o número de caracteres aceitos em um campo de dados;
este atributo só é válido para campos de entrada TEXT e PASSWORD.

Dia do mês: <INPUT TYPE=TEXT NAME="ex" MAXLENGHT=2>
Múltipla escolha

CHECKBOX insere um botão para escolha de opções. A cada
alternativa corresponde um valor a ser manipulado pelo script que
processa os dados. Note que o nome do campo (NAME) é o mesmo
para toda a lista de valores. Pode ser escolhida mais de uma
alternativa.

<INPUT TYPE=CHECKBOX NAME="esporte"
VALUE="basquete">Basquete <br>

<INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>Bocha

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="esporte" VALUE="volei"
CHECKED>Vôlei <br>

<INPUT TYPE=CHECKBOX NAME="esporte"
VALUE="futebol">Futebol
Escolha única

RADIO insere um botão de escolha de valores para uma opção, isto
é, somente uma alternativa pode ser escolhida. Note que o nome do
campo (NAME) é o mesmo para toda a lista de valores.

<INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras
<br>

<INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional

Uma diretiva CHECKED marca uma escolha inicial - se o usuário
não escolher nenhuma opção, o formulário irá considerar a
alternativa "pré-escolhida":

<INPUT TYPE=RADIO NAME="time" VALUE="aea"
CHECKED>AEA <br>

<INPUT TYPE=RADIO NAME="time" VALUE="naut">Náutico
Botões de ação

SUBMIT apresenta o botão que causa o
envio dos dados de entrada para o
servidor:

<INPUT TYPE=SUBMIT VALUE="Envia
mensagem">
Lista de Opções

<SELECT> apresenta uma lista de valores, através de campos OPTION.

<SELECT NAME="sabor" SIZE=4>

<OPTION>Abacaxi

<OPTION SELECTED>Creme

<OPTION>Morango

<OPTION>Chocolate

</SELECT>

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="sabor" SIZE=4 MULTIPLE>
TEXTAREA

<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"> comentário </TEXTAREA>
CGI Scripts

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 que recebem requisições de informação, retornando um
documento com os resultados correspondentes. Esse documento
pode ser gerado pelo script especialmente para atender àquela
requisição (diz-se que o documento é ´gerado “on the fly”´).

Exemplos de aplicação de CGI incluem processamento de dados
submetidos através de formulários: consulta a banco de dados,
cadastramento em listas, livros de visita, pesquisas de opinião.

Tais scripts podem ser escritos em qualquer linguagem que possa
ler variáveis, processar dados e retornar respostas - ou seja,
qualquer linguagem de programação!
CGI Scripts

Visão Geral

1. leitura de dados entrados pelo usuário (e/ou campos de
informação de um pacote HTTP);

2. processamento dos dados (armazenamento dos dados em um
banco de dados, realização de cálculos, recuperação de dados
etc.);

3. montagem de uma página Web ou geração de uma imagem com
os resultados produzidos.
Submissão de formulários

<FORM ACTION="/cgi-bin/teste.cgi" METHOD=método></FORM>

onde ACTION indica o URL do script que receberá os dados (ainda não vamos nos preocupar
com o campo METHOD)

Quando submetemos os dados de um formuláriom, o browser organiza os dados entrados pelo
usuário, assegurando que as informações chegarão em ordem e serão compreendidas pelo
script. Vejamos alguns exemplos.

Um campo de texto simples, tal como:

<INPUT TYPE=TEXT NAME="nome">

<INPUT TYPE=TEXT NAME="idade">

cuja entrada tenha sido: Joao Silva e 37

será organizado pelo browser da seguinte forma:

nome=Joao+Silva&idade=37

Note que os espaços em branco são substituídos por sinais de + e campos de informação são
separados por &.Também todos os acentos e símbolos especiais são codificados em
hexadecimal para o envio dos dados. Esta codificação dos dados de um formulário é padrão.
Métodos de HTTP

O protocolo HTTP utiliza vários métodos de manipulação e
organização dos dados. Atualmente, dois métodos são mais
utilizados para submeter dados de formulários: POST e GET.

POST

Com POST, os dados entrados pelo formulário fazem parte
do corpo da mensagem enviada para o servidor;

A cadeia de caracteres com os dados do formulário é lida
como uma entrada de dados padrão, de comprimento
CONTENT_LENGTH;

É possível transferir grande quantidade de dados.
Métodos de HTTP

GET

Com GET, os dados de entrada do script fazem parte do
URL associado à consulta enviada para o servidor - por
exemplo:
http://www.google.com.br/search?hl=pt-BR&q=teste

A cadeia de entrada é colocada na variável de ambiente
QUERY_STRING;

Suporta somente até 128 caracteres;

Como os dados da consulta fazem parte do URL, ela pode
ser encapsulada em um URL de link ou bookmark;

Um detalhe é que os dados de entrada assim submetidos
são copiados no registro de acessos ao site; portanto,
informações que exigem segurança não devem ser
manipuladas por este método.
GNU Free Documentation License
Documento Original
Copyright (c) 1995-2006 Maria Alice Soares de Castro
É garantida a permissão para copiar, distribuir e/ou modificar este

documento sob os termos da GNU Free Documentation License, Versão
1.2 ou qualquer versão posterior publicada pela Free Software Foundations;
sem Seções Invariantes, Textos de Capa Frontal, e sem Textos de Quarta
Capa. Uma cópia da licença é incluída na seção intitulada "GNU Free
Documentation License".
http://www.gnu.org/copyleft/fdl.html

HTML - Hyper Text Markup Language (Linguagem

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML - Hyper Text Markup Language (Linguagem

Uploaded by

Copyright:

Available Formats

HTML - Hyper Text Markup Language

(Linguagem de Formatação de Hipertexto)

<FRAMESET COLS="x, y">

Dois frames em linha

<FRAMESET ROWS="x, y">

<FRAMESET COLS="x, y">

<FRAMESET ROWS="x, y">

É garantida a permissão para copiar, distribuir e/ou modificar este

You might also like