Acrescentando som e vídeo

Apresentação em tema: "Acrescentando som e vídeo"— Transcrição da apresentação:

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

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

3 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)

4 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)

5 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”

6 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

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

8 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

9 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

10 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

11 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

12 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.

13 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

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

15 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

16 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!

17 O que fazer com os dados? 1a opção: Enviar por correio eletrônico
<FORM method="POST" enctype="text/plain"> <P>Deixe uma mensagem pra mim<BR> <TEXTAREA rows=5 cols=30></TEXTAREA><BR> <INPUT type="submit" value="Enviar"> </P> </FORM>

18 O que fazer com os dados? 2a opção: Enviar para um programa (CGI)
<FORM method="POST” action=" ... </FORM>

19 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.

20 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.

21 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} H {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>

22 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}

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

24 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= type=“text/css”> </head>

25 É 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.

26 Publicação na Web Provedores e instituições: - será fornecido endereço e senha - utilizar FTP para transferência dos arquivos