HTML Avançado

Prévia do material em texto

HTML Avançado – Fundação Bradesco
Criando e formatando tabelas
Aprenderemos nessa primeira parte: Criar e formatar uma tabela; Criar formulários com campos de entrada de dados; Criar e formatar frames; Documentar a página web.
Por que utilizar tabelas em HTML?
Tabelas são muito úteis para a organização dos dados e das imagens em páginas web, pois possibilitam um alinhamento que seria difícil de conseguir com simples comandos.
Uma tabela é constituída de linhas e colunas, que podem, ou não, conter dados.
Vamos iniciar criando uma tabela simples. Depois, veremos maneiras de adicionar algumas características à tabela, como título, borda e largura.
As tabelas podem conter textos, listas, imagens e, inclusive, outras tabelas.
Criando uma tabela
A tag utilizada para criar uma tabela é a <TABLE></TABLE>.
No HTML as tabelas são criadas apenas com linhas e não colunas, diferente das criadas, por exemplo, no Word. 
Dessa forma, além da tag <TABLE>, são necessárias mais duas tags para a construção da tabela:
<TD> </TD> - responsável por criar as células
<TR> - responsável por criar as linhas
Observe como criar uma tabela simples:
<TABLE>
<TR>
<TD> Nome </TD>
<td> Sobrenome </TD>
<TR>
<TD> Denys </TD>
<td> Barbosa </TD>
<TR>
<TD> Nelisa </TD>
<td> Ribeiro </TD>
</TABLE>
Resultado:
Nome	Sobrenome
Denys 	Barbosa
Nelisa	Ribeiro
Atributos da tag
A tag <TABLE>  possui vários atributos que permitem, entre outros aspectos, controlar:
O alinhamento da tabela na página;
O alinhamento dos dados nas células;
A largura e cor da borda;
As dimensões da tabela.
Atributo BORDER
Para criar um efeito que facilite a visualização da tabela, você pode inserir uma borda.
Neste caso, você utilizará o atributo BORDER. A espessura da borda é definida em pixels.
A sintaxe fica assim: 
<TABLE BORDER = "nº de pixels">
<TABLE BORDER="1">
<TR>
<TD> Nome </TD>
<td> Sobrenome </TD>
<TR>
<TD> Denys </TD>
<td> Barbosa </TD>
<TR>
<TD> Nelisa </TD>
<td> Ribeiro </TD>
</TABLE>
Resultado:
	Nome
	Sobrenome
	Denys
	Barbosa
	Nelisa
	Ribeiro
Você também pode inserir uma borda colorida. Neste caso, o atributo a ser utilizado é o BORDERCOLOR. A sintaxe fica assim:
<TABLE BORDERCOLOR = "cor">
<TABLE BORDER="3" BORDERCOLOR=”FF6600”>
<TR>
<TD> Nome </TD>
<td> Sobrenome </TD>
<TR>
<TD> Denys </TD>
<td> Barbosa </TD>
<TR>
<TD> Nelisa </TD>
<td> Ribeiro </TD>
</TABLE>
Resultado:
	Nome
	Sobrenome
	Denys
	Barbosa
	Nelisa
	Ribeiro
Atributo BGCOLOR
O atributo BGCOLOR permite a você definir uma cor de fundo para a tabela toda, quando usada na tag <TABLE>. Pode ou não ser utilizado com os atributos BORDER e BORDERCOLOR.
A sintaxe fica assim: <TABLE BGCOLOR = "cor">
<TABLE BORDER="3" BORDERCOLOR=”FF6600” BGCOLOR=”CCFFFF”>
<TR>
<TD> Nome </TD>
<td> Sobrenome </TD>
<TR>
<TD> Denys </TD>
<td> Barbosa </TD>
<TR>
<TD> Nelisa </TD>
<td> Ribeiro </TD>
</TABLE>
Resultado:
	Nome
	Sobrenome
	Denys
	Barbosa
	Nelisa
	Ribeiro
É possível, também, definir uma cor de fundo para partes da tabela usando o atributo BGCOLOR com as tags <TR> ou <TD>. A sintaxe fica assim: 
<TR BGCOLOR "cor"> ou <TD BGCOLOR "cor">
<TABLE BORDER="3" BORDERCOLOR=”FF6600”>
<TR BGCOLOR=”CCFFFF >
<TD> Nome </TD>
<td> Sobrenome </TD>
<TR>
<TD> Denys </TD>
<td> Barbosa </TD>
<TR>
<TD> Nelisa </TD>
<td BGCOLOR=”CCFFFF> Ribeiro </TD>
</TABLE>
Resultado:
	Nome
	Sobrenome
	Denys
	Barbosa
	Nelisa
	Ribeiro
	Atributo BACKGROUND
O atributo BACKGROUND permite a você definir uma imagem de fundo em uma tabela.
A imagem é carregada em seu tamanho normal e é distribuída em pequenas partes, até preencher o conteúdo da tabela.
A sintaxe fica assim:
<TABLE BACKGROUND= "imagem">
EX: <TABLE BORDER="3" BORDERCOLOR="000066" BACKGROUND="FB.png">
Atributos WIDTH e HEIGHT
Os atributos WIDTH e HEIGHT são utilizados para definir a largura e altura da tabela em pixels ou porcentagem, uma vez que, por padrão, a célula da tabela assume o tamanho do maior dado inserido:
WIDTH - define a largura
HEIGHT - define a altura
A sintaxe fica assim:
<TABLE WIDTH="valor" HEIGHT="valor">
Os atributos width e height também podem ser utilizados para alterar a altura e largura das células.
Se os valores definidos nestes atributos forem menores que o espaço necessário para visualização dos dados da tabela, o navegador os ignora para garantir a apresentação adequada dos dados.
Observe, neste exemplo, que a largura da tabela foi definida em 300 pixels (WIDTH="300") e sua altura ocupará 20% (HEIGHT="20%") da altura do navegador.
<TABLE WIDTH="300" HEIGHT="20%" BORDER="2">
<TR BGCOLOR= #E0EEEE>
<TD><FONT FACE= "Comic Sans MS"><B>Nome</B></TD>
<TD><FONT FACE= "Comic Sans MS"><B>Sobrenome</B></TD>
<TR>
<TD><FONT FACE= "Calibri">Denys</FONT></TD>
<TD><FONT FACE= "Calibri">Barbosa</FONT></TD>
<TR BGCOLOR = #E0EEEE>
<TD><FONT FACE= "Calibri">Nelisa</FONT></TD>
<TD><FONT FACE= "Calibri">Ribeiro</FONT></TD>
</TABLE>
Resultado:
	Nome
	Sobrenome
	Denys
	Barbosa
	Nelisa
	Ribeiro
Atributo ALIGN
O atributo ALIGN altera o alinhamento da tabela em relação à página web. A sintaxe fica assim: <TABLE ALIGN = "alinhamento">. O alinhamento pode ser:
Esquerda: <TABLE ALIGN=”left”>Tabela</TABLE>
Centro: <TABLE ALIGN=”center”>Tabela</TABLE>
Direita: <TABLE ALIGN=”right”>Tabela</TABLE>
Cellspacing
O atributo CELLSPACING especifica o espaço entre a borda da tabela e as células, sempre em pixels.
A sintaxe fica assim: <TABLE CELLSPACING = "valor"> 
EX: <TABLE WIDTH="300" HEIGHT="25%" BORDER="4" CELLSPACING="10">
Cellpadding
Já o atributo CELLPADDING especifica o espaço entre os dados e a borda de uma célula, sempre em pixels.
A sintaxe fica assim: <TABLE CELLPADDING = "valor"> 
EX: <TABLE WIDTH="300" HEIGHT="25%" BORDER="4" CELLSPACING="10" CELLPADDING="7">
Atributos da tag TD
Agora, vamos analisar os atributos da tag TD. Podemos mudar as propriedades das células utilizando os seguintes atributos:
Align: Alinha horizontalmente com “Left”, “Right” ou “Center”. <TD ALIGN=”alinhamento”> 
Valign: Alinha verticalmente com “Top”, “Bottom” ou “Center”. <TD VALIGN=”alinhamento”>
Colspan: Mescla uma célula em mais de uma coluna. <TD COLSPAN=”nº de colunas”>
Rowspan: Mescla uma célula em mais de uma linha. <TD ROWSPAN=nº de linhas”>
Criando e formatando formulários
Agora veremos como: Criar um formulário; Inserir campos de entrada de dados; Inserir lista e menus de opções; Inserior botões e caixas de opções.
O que é um formulário?
O formulário nada mais é que um questionário que permite ao usuário participar de uma pesquisa, se cadastrar em sites diversos, entrar em contato para esclarecer dúvidas, realizar compras, entre tantas outras opções.
Por exemplo, aqui na Escola Virtual nós usamos um formulário para receber seus dados quando você se cadastrou.
No entanto, os formulários apenas coletam os dados, sem processá-los. Quem faz isso são scripts de processamento (programas armazenados no servidor) e o navegador exibe o resultado em sua janela.
Neste módulo, trataremos apenas da criação do formulário.
	Criando um formulário
Para que você possa criar um formulário em HTML, utilize a tag FORM.
A sintaxe fica assim:
<FORM atributos>
(conteúdo do formulário)
</FORM>
Entre as tags que iniciam e encerram o formulário, você deve inserir as tags que criam campos de entrada, formatam o texto e fornecem instruções sobre o que fazer com os dados que são inseridos.
Nas próximas telas, você conhecerá os atributos da tag <FORM>.
	Atributo ACTION
O primeiro atributo utilizado com a tag <FORM> é o ACTION. Ele especifica a URL do script que processará os dados do formulário.
A sintaxe é a seguinte: <FORM ACTION = "URL">
Observe os exemplos abaixo:
<FORM ACTION=mailto:endereco@eletronico.com.br> - Dados serão enviados para o email
<FORM ACTION=”processa.php”> - Dados serão processados por um código PHP
AtributoMETHOD
O atributo METHOD especifica a maneira de envio dos dados do formulário para o servidor web, para que sejam processados.
Existem dois métodos que podem ser utilizados: POST e GET.
	METHOD="POST"
	METHOD="GET"
	Se o valor do atributo METHOD for definido como POST, o navegador enviará diretamente o fluxo de dados para o script CGI no servidor web. É mais utilizado, porque permite a transmissão de uma maior quantidade de dados ao servidor web.
	Por outro lado, se o atributo METHOD for definido como GET, o fluxo de dados será anexado à URL especificada no atributo ACTION e enviado ao servidor como uma única URL. O valor GET é utilizado para respostas únicas, como uma string de texto.
Caso você tenha de utilizar um script, verifique qual o melhor método para que as informações sejam enviadas a ele.
A sintaxe completa da <FORM> fica assim: <FORM ACTION="url" METHOD="get" ou "post">
Objetos do formulário
Um formulário é composto por vários elementos responsáveis por receber as informações inseridas pelo usuário.
Essas informações são de diferentes tipos de entrada, como: texto, senha, única escolha e múltipla escolha.
Tag INPUT e seus atributos
Você utilizará a tag <INPUT> para criar os diferentes tipos de campos de entrada de dados no formulário. Veja alguns de seus atributos:
Type: Especifica o tipo de controle a ser criado. Se nada for especificado, o padrão é text.
Value: Especifica o valor inicial do controle. É opcional, com exceção de quando o TYPE é “radio” ou “checkbox”.
Name: Nomeia cada campo do formulário, para que o script possa manipular os dados.
Maxlength: Quando o valor de TYPE for “text” ou “password”, eles estabelecem o número máximo de caracteres do campo. O valor padrão é ilimitado.
Src: Quando o valor de TYPE for “image”, este atributo especifica a localização da imagem usada para decorar o botão de enviar.
Checked: Quando TYPE tem o valor “radio” ou “chackbox”, este atributo significa que o botão está selecionado.
Size: Especifica o tamanho inicial do controle. A largura é dada em pixels, com exceção de quando o valor for “text” ou “password”. Nestes casos, o valor refere-se ao número de caracteres.
Os possíveis valores de TYPE
O atributo TYPE, como comentamos, especifica o tipo de controle ou de campo que será criado. Portanto, você já deve ter entendido que ele é o mais importante.
Imagine criar um controle tipo texto para armazenar datas de nascimento. Seria bem difícil consultar, por exemplo, os usuários com determinada idade, não é mesmo?
Observe os tipos de controle de entrada que podem ser criados:
Image: Cria um botão de enviar baseado em ma imagem especifica, cuja URL deve ser fornecida.
File: Cria um controle para seleção de arquivo. O valor do atributo deve ser configurado como o nome do arquivo.
Reset: Cria um botão dde reset, que limpa todos os campos.
Button: Cria um botão para ser pressionaddo. O atributo deve ter o nome do botão.
Submit: Cria um botão de enviar.
Password: Cria um campo texto sem exibir o que está sendo digitado.
Radio: Cria um botão de escolha única.
Text: Cria campo de texto de uma linha.
Checkbox: Cria caixa de seleção.
Hidden: Cria controle oculto.
Inserindo um campo texto
Neste módulo, você aprenderá a adicionar um campo de texto, um campo de senha e um campo oculto no formulário.
Por exemplo, em um formulário de compras on-line, podemos usar um campo de texto para receber o nome do cliente. Para isso, você usa o valor TEXT no atributo TYPE da tag <INPUT>.
A sintaxe para adicionar o campo do nome do cliente é exibida abaixo:
<INPUT TYPE=text NAME=”Nome” SIZE=”20” MAXLENGHT=”50”>
Atributo VALUE
Por padrão, os navegadores exibem uma caixa de texto vazia no formulário. Caso exista a necessidade de exibir um texto padrão, deve-se usar o atributo VALUE, como exemplificado abaixo:
<INPUT TYPE = text NAME="uf" SIZE="2" VALUE ="SP">
Inserindo um campo de senha
Agora, vamos demonstrar como adicionar um campo de senha em um formulário. Este tipo de campo é utilizado para que as informações inseridas não sejam exibidas na tela.
Por exemplo, em um formulário de compra on-line, usa-se o campo de senha para que o usuário entre com os dados sem que ninguém veja. Para isso, é utilizado o valor PASSWORD no atributo TYPE.
A sintaxe para adicionar um campo de senha em um formulário está exibida abaixo.
<INPUT TYPE=password NAME="cartao" SIZE="16">
Inserindo botões de escolha única
Radio buttons são utilizados para permitir ao usuário selecionar uma opção única entre um conjunto de opções exibidas em um formulário.
Por exemplo, no formulário de pedido on-line, você pode usar um conjunto de radio buttons para verificar a bandeira do cartão de crédito utilizado pelo cliente.
Para adicionar um radio button em um formulário, é usado o valor RADIO no atributo TYPE da tag INPUT. A sintaxe é a seguinte:
<INPUT TYPE=radio NAME="variável" VALUE=”valor”>
Para exibir uma das opções selecionadas como padrão, usamos o atributo CHECKED na tag <INPUT>.
<INPUT TYPE=radio NAME="variável" VALUE=”valor” CHECKED>
EX: <INPUT TYPE=radio NAME="vi" CHECKED>VISA<BR>
Inserindo botões de múltipla escolha
Agora, você verá como adicionar um conjunto de checkboxes (botões de múltipla escolha) para permitir ao usuário selecionar várias opções.
Em um formulário de pedido on-line, podemos usar um conjunto de checkboxes para obter a informação sobre os horários de entrega do pedido.
Para adicionar um checkbox, basta especificar o valor CHECKBOX no atributo TYPE.
A sintaxe deste comando é assim:
<INPUT TYPE=checkbox" NAME="VARIÁVEL">valor
EX: <INPUT TYPE=radio NAME="mst">MASTERCARD</P>
Inserindo uma área de texto
Vamos verificar como adicionar uma área de texto maior em um formulário, para receber várias linhas de texto.  Podemos utilizar este campo para registrar a referência do endereço de um cliente.
A tag <TEXTAREA></TEXTAREA> é a responsável pela criação desse campo especial.
Os atributos ROWS, que especifica o número de linhas (altura) e COLS, que especifica o número de colunas (largura) da área de texto, são utilizados com essa tag. A sintaxe está exibida abaixo:
<TEXTAREA NAME = "nome" ROWS = "número" COLS = "número" NAME="variável"> Descrição </TEXTAREA>
EX: <TEXTAREA NAME="ref" ROWS="2" COLS= "40"></TEXTAREA>
Botões SUBMIT e RESET
Em um formulário, o botão SUBMIT envia ao servidor web a informação digitada pelo usuário para ser processada pelo script CGI correspondente.
Para criar um botão de enviar, usamos o valor SUBMIT no atributo TYPE da tag INPUT.
Para trocar o texto padrão do botão, insira o atributo VALUE e defina o novo texto, como demonstrado abaixo:
<INPUT TYPE=submit VALUE="Enviar">
O botão RESET limpa as entradas que foram feitas em um formulário, ou seja, apaga as informações inseridas em todos os campos.
Para adicionar um botão RESET em um formulário, utilize o valor RESET no atributo TYPE da tag INPUT.
Também é possível mudar o texto padrão, utilizando-se o atributo VALUE e o texto desejado, conforme ilustrado abaixo:
<INPUT TYPE=reset VALUE="Limpar">
Inserindo um campo oculto
Agora, você verá como adicionar um campo oculto em um formulário para enviar uma palavra-chave, um número de validação ou qualquer string, para o script CGI.
Por exemplo, no formulário de pedidos on-line, podemos utilizar um campo oculto para enviar uma palavra-chave, que valide o número do CPF do cliente.
Para adicionar este campo, incluimos o valor HIDDEN no atributo TYPE.
A sintaxe fica assim:
<INPUT TYPE=HIDDEN NAME="VARIÁVEL" VALUE="VALOR">
Lista de opções ou menu?
Se você precisar apresentar várias opções para o usuário e não tiver muito espaço para isso, você pode utilizar uma lista de opções ou um menu.
Ambas as opções são criadas pela mesma tag <SELECT></SELECT>.
<SELECT MULTIPLE NAME=”Nome da Lista”>
<OPTION SELECTED VALUE=”valor1”> Valor visualizado 1
</SELECT>
Multiple: Exibe a lista sempre aberta.
Name: Atributo que identifica a lista.
Option: Cria cada itemda lista.
Selected: Indica o valor padrão da lista.
Value: Valor que será retornado.
Lista de opções e menus
A lista de opções serve para controlar o número de opções exibidas, pois é possível definir sua altura com o atributo SIZE. Observe abaixo:
<FORM>
<SELECT NAME="cidades" SIZE="4">
<OPTION>Londres
<OPTION>Paris
<OPTION>Roma
<OPTION>Madri
</SELECT>
</FORM>
É possível transformar a lista dde opções em um menu caso o espaço disponível seja pequeno.
A diferença do menu para a lista de opções é que apenas uma linha com uma seta para baixo é exibida quando o navegador carrega o formulário.
<FORM>
<SELECT NAME="cidades">
<OPTION>Londres
<OPTION>Paris
<OPTION>Roma
</SELECT>
</FORM>
Criando e formatando frames
Agora aprenderemos: A tag <FRAMESET> e seus atributos; A tag <FRAME> e seus atributos; Mesclanddo as tags <FRAMESETS>; Criando links com destinos em frames.
Frames: o que são e para que servem
Frames ou molduras são utilizados para dividir a janela do navegador em diferentes partes e, cada uma delas, pode ser atualizada separadamente, pois carrega um documento HTML diferente.
Frames são como moldes onde as páginas web são obrigadas a se encaixar.
O Frame Document ou Frameset é o arquivo que define a estrutura e a distribuição dos frames do site. Normalmente, este arquivo contém a página principal.
A tag FRAMESET
Para criar frames, você usa a tag <FRAMESET> no lugar da tag <BODY>.
Observe o código abaixo e o resultado no navegador.
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<BODY>
<FRAMESET COLS="25%,*,25%">
<FRAME SRC="frame_a.html">
<FRAME SRC="frame_b.html">
<FRAME SRC="frame_c.html">
</FRAMESET>
</BODY>
</HTML>
Observe que o código contém instruções para cada frame abrir um documento diferente.
Além disso, na tag <FRAMESET>, você define o tamanho de cada um dos frames com os atributos COLS e ROWS que especificam, respectivamente, a largura e a altura dos frames.
O primeiro e terceiro frames estão especificados como 25% do tamanho da tela. O asterisco (*) colocado no do meio, indica que ele usará o espaço restante, que neste caso é de 50%.
A tag FRAME
Como você observou na tela anterior, utilizamos a tag FRAME com a tag FRAMESET.
Os atributos que você pode usar com a tag FRAME para carregar uma página web são:
SRC: Especifica a URL que você deseja carregar em um frame.
MARGINWIDTH: Especifica as margens direita e esquerda (largura) do conteúdo em um frame. Seu valor é especificado em pixels.
MARGINHEIGTH: Especifica as margens superior e inferior (altura) do conteúdo em um frame. Seu valor é especificado em pixels.
SCROLLING: Adiciona uma barra de rolagem a um frame.
NORESIZE: Impede que o usuário redimensione um frame.
O atributo NAME
Agora você aprenderá a apontar frames, ou seja, direcionar o link para abrir no frame desejado.
Quando usamos frames, podemos querer manter o conteúdo de um e carregar as páginas web em outro. Para fazer isto, apontamos o link para um frame.
O frame em que o conteúdo permanece constante é chamado de estático e o outro, no qual o conteúdo muda, é chamado de dinâmico.
Para apontar frames, você precisa primeiro especificar nomes para os frames, usando o atributo NAME com a tag FRAME.
O código que você usa para especificar o nome Main para um frame que exibirá o arquivo phil.html é <FRAME SRC="phil" NAME ="main">.
Apontando um frame
Depois de especificar um nome para um frame, você pode especificá-lo como o frame alvo em um link.
Para isto, você usa o atributo TARGET com a tag (ANCHOR - LINK).
A sintaxe fica assim: <A HREF="URL" TARGET="nome_frame">
O atributo TARGET possui quatro valores, veja:
_blank: Abre o link em uma nova janela.
_self: Abre o link no mesmo frame.
_parent: Carrega a página no frame principal.
_top: Carrega a página no frame mais alto da página.
Por exemplo, para abrir o documento exemplo.html em outra janela, devemos inserir o seguinte código no documento: <A HREF="exemplo.html" TARGET="_blank"> Clique aqui </A>.
Incrementando a página web
Agora veremos: A tag <META>; Os atributos da tag <META>.
A tag META e seus atributos
Metadados são informações sobre seus dados. Neste caso, a tag <META>  fornece dados sobre seu documento HTML.
Estes dados, no entanto, não são exibidos para o usuário final. Eles servem para descrever as definições da página, palavras-chave, informações sobre o autor, quando foi a última modificação e outras informações relevantes.
A tag <META> deve ser inserida entre as tags <HEAD> e </HEAD>.
Todos os dados podem ser utilizados pelos navegadores, sistemas de busca e outros serviços.
Vamos descobrir como inserir estas informações na página?
O atributo CONTENT
O atributo CONTENT aceita somente texto e especifica o conteúdo da informação META. Seu valor depende do valor dos atributos NAME ou HTTP-EQUIV. Veja, abaixo, os dois casos:
	NAME
	HTTP-EQUIV
	O atributo NAME fornece um nome para a informação no atributo CONTENT.
A sintaxe é <META NAME =”valor relativo à name”>
Os valores do atributo NAME podem ser:
AUTHOR
DESCRIPTION
KEYWORDS
GENERATOR
ROBOTS
COPYRIGTH
	O atributo HTTP-EQUIV fornece um cabeçalho HTTP para a informação no atributo CONTENT.
A sintaxe é <META HTTP-EQUIV =”valor”>
Os valores do atributo HTTP-EQUIV podem ser:
CONTENT TYPE
EXPIRES
REFRESH
SET-COOKIE
Por exemplo, a sintaxe para recarregar uma página automaticamente é <META HTTP_EQUIV="REFRESH" CONTENT="segundos" URL="novo_URL">