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:[email protected]” 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
Top Related