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ÁRIOS Formulá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 controle rows= número número de linhas visíveis cols= 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”

INPUT type=“text” type = “text” cria uma caixa de texto <INPUT type="text" name="nome" size=30> type = “text” cria uma caixa de texto name = texto nome do controle size = número número de caracteres visíveis maxlength = número máximo de caracteres a serem digitados value = texto texto inicial

INPUT type=“password” <INPUT type="password" name=”senha" size=8> type = “password” cria uma caixa de senha name = texto nome do controle size = número número de caracteres visíveis maxlength = número máximo de caracteres a serem digitados value = texto texto inicial (não deve ser utilizado...) Obs: Só com o formulário não garante-se segurança.

INPUT type=“checkbox” <INPUT type=”checkbox" name="op1" checked> type = “checkbox” cria uma caixa de checagem name = texto nome do controle checked se presente, inicia marcado

INPUT type=“radio” type = “radio” cria um botão de escolha <INPUT type=”radio" name=“sexo” value=”M”> ... <INPUT type=”radio" name=“sexo” value=”F”> ... type = “radio” cria um botão de escolha name = texto nome do controle. Deve ser o mesmo para todos os botões de escolha de um mesmo grupo de opções exclusivas. value = texto valor associado à escolha, necessário para identificar a opção escolhida. checked se presente, inicia marcado

INPUT type=“file” type = “file” cria um botão para procurar arquivo <INPUT type=”file" name=“foto” size=“30”> type = “file” cria um botão para procurar arquivo name = nome nome do controle size = número número de caracteres visíveis value = texto pode ser utilizado, pelo visualizador, como nome do arquivo inicial

INPUT type=“button” type = “button” cria um botão (de uso genérico) <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

INPUT type=“reset” type = “reset” cria um botão “limpar” (reinicializa <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.

INPUT type=“submit” <INPUT type=”submit" name=“env” value=“Enviar”> type = “submit” cria um botão “enviar” (envia os dados do formulário) name = texto nome do controle value = texto texto dentro do botão

SELECT (menus) name = texto nome do controle <SELECT name=“estado” size=1> ...opções... </SELECT> name = texto nome do controle size = número número de opções visíveis multiple se presente, possibilita seleção mútipla <SELECT name="comidas" size=6 multiple> ... </SELECT>

OPTION (menus) Constrói um item de opção de um menu. <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

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 adequadamente no 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.

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

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>

É preciso utilizar um “servidor web” 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