Exercicio Especial 1 - Modelo básico

EM CONSTRUÇÃO

Curso: Webmaster & Webdesign
Disciplina: Criação de Site III
Professor: Jose Maria Silveira

(cs3_05_eventos.html)

LABORATORIO ESPECIAL 1
Criação de um modelo base.

A presente tarefa objetiva criar uma pagina basica para experiencias. Voce devera modificar o modelo abaixo conforme as orientaçoes.

Modelo básico:

<html> <head> </head>  <body>

<div> Modelo_base1 </div>

<form name="form1" method="post" action=""> <br>

  <div>  Alvo1 </div> <br>

  X=<input name="textfield1" type="text"> <br>

  Y=<input name="textfield2" type="text"> <br>

  Z=<input name="textfield3" type="text"> <br>
<br>

  <input name="botao1" value="  B1  "
type="button">

  <input name="botao2" value="  B2  "
type="button">

  <input name="botao3" value="  B3  "
type="button"> <br><br>

  <input name="checkbox1" value="checkbox" type="checkbox">
item 1 

  <input name="checkbox2" value="checkbox" type="checkbox">
item 2 

  <input name="checkbox3" value="checkbox" type="checkbox">
item 3 <br><br>

  <input name="radiobutton1" value="radiobutton"
type="radio"> opcao A 

  <input name="radiobutton2" value="radiobutton"
type="radio"> opcao B <br><br>

  <div>  Alvo2 </div> 

</form>

</body></html>

Tarefas:

parte 1 (criar arquivos):

Salve o codigo acima em um nome qualquer.html;
Personalize a página, colocando cor de fundo, titulo, etc., sem alterar NADA dentro da tag FORM. Use sua imaginação, inclua dados fictícios para dar a impressão de uma pagina real.
Salve novamente o arquivo, agora com suas alterações e com o nome Base1.html;
Crie uma nova copia do arquivo salvando como: (seuNome).html (este será usado nas experiencias, mantendo o mBase1.html como original).

Parte 2 (preparação):

Utilizando arquivo acima (SeuNome.html), faça:

inclua tags de comentários no final de cada linha dos objetos do form (ex: primeiro botao );
não modifique os textos que aparecem no formulario (Ex: X, Y, B1, opcao A,etc)
altere os nomes do form e de cada um dos 11 objetos (utlize nomes curtos);
coloque atributos ID para as textos "alvo 1" e "alvo 2";

Parte 3 - Exercicios:

1. Incluir evento onClick no terceiro botão (b3) de forma a mudar a cor de fundo do documento para cinza médio.
Dica: propriedade bgcolor do objeto document, cor em hexa: cccccc.
Obs: volta ao normal recarregando a página.

2. Incluir evento onClick no primeiro botão, de forma a chamar o método alert() com a mensagem 'boa noite! '.

3. Incluir evento onClick no segunto botão para chamar o método alert() que apresente a propriedade name do form.
Dica: como so temos um formulario use: document.forms[0].name

4. Incluir evento onMouseDown na tag do "alvo 1" para que chame o metodo confirm() apresentado a propriedade location do documento.
Dica: use: document.location

5. Incluir evento onUnload página chamando o metodo alert() com mensagem de despedida.
Dica: coloque o evento na tag body, equivalente à página.

Hosted by www.Geocities.ws