Acrescentando som e vídeo

<center><table border=1>

<tr><td>

<embed src="stress.avi" width=200 height=180 autostart="false" loop="false" volume="50" align=absmiddle controls="smallconsole">

</td><td align="center">

<img src="doce-32.jpg"><p>

Locução: <embed src="ovo.wav" width=47 height=21 autostart="false" loop="false" volume="50" align=absmiddle controls="smallconsole">

</td></tr>

</table></center>

FORMULÁRIOSFormulários possibilitam a entrada de dados do usuário:

Ex: pesquisa, cadastro, reserva, comércio eletrônico etc.

<FORM> conteúdo (controles + texto, imagens,

tabelas, etc.)</FORM>

Controles

São objetos para a entrada de dados:– TEXTAREA (área de texto)– INPUT (caixa de texto, caixa de senha, caixa de

checagem, escolha e botões)– SELECT (menu)– LABEL (rótulo)

TEXTAREA

<FORM><TEXTAREA rows=5 cols=20>Aqui o texto inicial,que será mostrado exatamente como for digitado. </TEXTAREA></FORM>

name = texto nome do controlerows= número número de linhas visíveiscols= número número de colunas visíveis (caract. por linha)

INPUT

Permite a entrada de tipos especiais de dados

type = “text”

type = “password”

type = “checkbox”

type = “radio”

type = “file”

type = “button”

type = “reset”

type = “submit”

INPUTtype=“text”

<INPUT type="text" name="nome" size=30>

type = “text” cria uma caixa de textoname = texto nome do controlesize = número número de caracteres visíveismaxlength = número máximo de caracteres a serem digitadosvalue = texto texto inicial

INPUTtype=“password”

<INPUT type="password" name=”senha" size=8>

type = “password” cria uma caixa de senhaname = texto nome do controlesize = número número de caracteres visíveismaxlength = número máximo de caracteres a serem digitadosvalue = texto texto inicial (não deve ser utilizado...)

Obs: Só com o formulário não garante-se segurança.

INPUTtype=“checkbox”

<INPUT type=”checkbox" name="op1" checked>

type = “checkbox” cria uma caixa de checagemname = texto nome do controlechecked se presente, inicia marcado

INPUTtype=“radio”

<INPUT type=”radio" name=“sexo” value=”M”> ...<INPUT type=”radio" name=“sexo” value=”F”> ...

type = “radio” cria um botão de escolhaname = texto nome do controle. Deve ser o mesmo para

todos os botões de escolha de ummesmo grupo de opções exclusivas.

value = texto valor associado à escolha, necessário para identificar a opção escolhida.

checked se presente, inicia marcado

INPUTtype=“file”

<INPUT type=”file" name=“foto” size=“30”>

type = “file” cria um botão para procurar arquivoname = nome nome do controlesize = número número de caracteres visíveisvalue = texto pode ser utilizado, pelo visualizador, como nome do arquivo inicial

INPUTtype=“button”

<INPUT type=”button" name=“botaoOK” value=“ OK ”>

type = “button” cria um botão (de uso genérico) name = nome nome do controle value = texto texto dentro do botão

INPUTtype=“reset”

<INPUT type=”reset" name=”bReset" value=“Limpar”>

type = “reset” cria um botão “limpar” (reinicializa os valores do formulário, geralmente

em branco) name = texto nome do controle value = texto texto dentro do botão

Obs: Quando o usuário apertar este botão, irá perder os dados já digitados.

INPUTtype=“submit”

<INPUT type=”submit" name=“env” value=“Enviar”>

type = “submit” cria um botão “enviar” (envia os dadosdo formulário)

name = texto nome do controlevalue = texto texto dentro do botão

SELECT(menus)<SELECT name=“estado” size=1>...opções...</SELECT>

name = texto nome do controlesize = número número de opções visíveismultiple se presente, possibilita seleção mútipla

<SELECT name="comidas" size=6 multiple>...</SELECT>

OPTION(menus)

<SELECT name=“navegador” size=3> <OPTION value=“MSIE”>Internet Explorer</OPTION> <OPTION value=“NE”>Netscape</OPTION> <OPTION value=“outros”>Outros...</OPTION></SELECT>value = texto valor da opção

Constrói um item de opção de um menu.

LABEL

<INPUT type=“radio” name=“opCompra” value=“sim” id=“opSim”><LABEL for=“opSim”> Sim </LABEL>

for = id_controle indica qual o controle deve ser ativado

Obs1.: Deve-se especificar id=texto dentro do controle a ser ativado pelo rótulo.

Obs2.: Utilize criteriosamente - ainda não funciona adequadamenteno Netscape!

O que fazer com os dados?

1a opção:

Enviar por correio eletrônico

<FORM method="POST" action="mailto:leila@uniriotec.br” enctype="text/plain"> <P>Deixe uma mensagem pra mim<BR> <TEXTAREA rows=5 cols=30></TEXTAREA><BR> <INPUT type="submit" value="Enviar"> </P></FORM>

O que fazer com os dados?

2a opção:

Enviar para um programa (CGI)

<FORM method="POST” action="http://www.uniriotec.br/~leila/cgi-bin/cadastro.pl"> ... </FORM>

O que fazer com os dados?

3a opção:

Utilizar javascript

– possibilita verificar a consistência de alguns dados do formulário

– construir efeitos especiais como• menu das páginas do site• mensagem rolante• relógio etc.

Folhas de Estilo Folhas de estilo é um conjunto de regras que

informa como deve ser a formatação e a organização da página, definindo características e comportamento dos elementos HTML.

Vantagens:– Separa a estrutura da forma de apresentação

– Maior Controle da aparência da página

– Páginas mais leves

– Maior facilidade para fazer manutenção num site.

<html><head> <title>Teste com folhas de Estilos </title> <style type=“text/css”> <!--

Body {font-size:10pt;color:808080;font-family:Arial,Sans-serif}H1 {font-size:24pt;color:990000;font-style:italic}A:link {font-size:10pt;color:003366;text-decoration:none}

A:visited {font-size:10pt;color:003300;text-decoration:none} - ->

</style></head> <body>

</body></html>

Exemplo

Múltiplas Declarações e Seletores Ex1:H1 {font-size:18pt; color:blue;font-family:Caslon,serif}ou H1 {font-size:18pt; color:blue; font-family:Caslon,serif}

Ex2:P {font:12pt “Times New Roman” bold}H2 {font-family: Arial,Helvetica, Sans-serif}

Ex3:H1,H2,H3 {color:blue; font-size:18pt; font-family:Arial, Helvetica}

3 Formas de Utilizar Estilos Especificamente dentro de um descritor :

<H1 style=“color:navy”> Autorama </H1>

Aplicando estilo localmente dentro de uma página: <head>

<style type=“text/css”><!--

P {font:12pt “Times New Romam” bold;

color:red}

I {color:black} -->

</style>

</head>

3. Permitindo que um estilo seja utilizado em várias páginas (arquivo externo)

Criar um arquivo texto com extensão .css com as definições,

Criar um vínculo em todas as páginas que utilizarão o estilo:<head>

<link rel = stylesheet

href= http://endereço/estilo.css

type=“text/css”>

</head>

Publicação na Web

É preciso utilizar um “servidor web”– provedores (pagos);– instituições (UFRJ,UNIRIO etc.);

• entrar em contato com os administradores para obter informações

– serviços gratuitos.• cadastrar-se e, possivelmente, estar sujeito a incluir

propagandas em suas páginas.

Publicação na Web

Provedores e instituições:

- será fornecido endereço e senha

- utilizar FTP para transferência dos arquivos