Wiki Cursos IFPR Foz:Sobre: mudanças entre as edições

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
(Aula CSS !)
 
 
Linha 275: Linha 275:
'''</html>'''
'''</html>'''


''Compile o código e terá o resultado.''
-----------------------------------------------------------------
       
== Aula de JavaScript ==
---------------------------------------------------------------
'''JavaScript''' é uma linguagem de programação interpretada . Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.
'''Caixas de Diálogo ou de Mensagem'''
'''O javaScript coloca á disposição três caixas de mensagens:'''
ºalert()
ºprompt()
ºconfirm()
'''Usando alert()'''
''Veja o código abaixo:''
<html>
<head>
<meta charset="utf-8">
<script>
alert("Bem vindo ao JavaScript !! ");
</script>
</head>
<body>
</body>
</html>
'''Compile o código e terá o resultado.'''
--------------------------------------
'''Usando prompt()'''
--------------------------------------
''Veja o código abaixo''
 
<html>
<head>
<title>Aula JavaScript</title>
<meta charset="utf-8">
<script>
nome = window.prompt("Por Favor , Digite seu nome:","");
document.write("Seja bem vindo " +nome);
</script>
</head>
<body>
</body>
</html>
''Compile o código e terá o resultado.''
--------------------------------------------------------------------------------------
'''Usando confirm()'''
--------------------------
''A caixa de diálogo é chamada pela função CONFIRM() e tem apenas dois botôes : um OK e outro Cancelar.''
<html>
<head>
<meta charset="utf-8">
<script>
escolha = confirm("Clique em um botao");
</script>
</head>
<body>
</body>
</html>


''Compile o código e terá o resultado.''
''Compile o código e terá o resultado.''

Edição atual tal como às 18h21min de 15 de agosto de 2013

Aula CSS

Com uso de CSS você pode alterar a apresentação dos diferentes objetos de formulário.

Neste tutorial mostrarei as regras CSS, básicas que permitem o controle sobre a apresentação dos formulários.

As tags HTML para formulários abordadas são as listadas abaixo: 

input;
select;
textarea;
form;


E um exemplo completo:E como exemplo prático de aplicação de estilo em formulários veremos como estilizar um formulário para login.

Como estudar e entender os exemplos Para cada tag a estilizar, apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.


Estilo CSS na tag <input>

Abaixo um código fonte Usando a Tag <INPUT>

<html>

<head> <meta charset="utf-8"> <style type="text/css">

input {

background-color: #B0E0E6;

font: 12px verdana, arial, helvetica, sans-serif;

color:#003399;

border:2px solid #000099;

}

</style>

</head>

<body>

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

<input type="radio" name="radiobutton"

value="radiobutton"> - Aqui um exemplo de RadioButton com a tag do tipo 'radio'.

</form>

<form name="form2" method="post" action="">

<input type="checkbox" name="checkbox"

value="checkbox"> - Aqui um exemplo de checkbox .

</form>

<form name="form3" method="post" action="">

<input type="text" name="textfield"> - Aqui um exemplo de caixa de diálogos usando a tag 'text'.

</form>

<form name="form4" method="post" action="">

<input type="submit" name="Submit"

value="Enviar"> - Aqui um exemplo do comando 'submit' .

</form>

</body>

</html>


Compile este código e terá o resultado .


Estilo CSS na tag <select>

<html>

<head>

<style type="text/css">

select {

background-color: #B0E0E6;

font:12px verdana, arial, helvetica, sans-serif;

color:#003399;

} </style>

</head>

<body>

TAG SELECT


<form name="form5"

method="post" action="">

<select name="select">

<option value="item_1">

item_1 da lista</option>

<option value="item_1">

item_2 da lista</option>

<option value="item_1">

item_3 da lista</option>

<option value="item_1">

item_4 da lista</option>

</select>

</form>


</body>

</html>

Compile o código fonte e terá o resultado


Estilo CSS na tag <textarea>


<html>

<head>

<style type="text/css">

textarea {

background-color: #B0E0E6;

font:12px verdana, arial, helvetica, sans-serif;

color:#003399;

}

</style>

</head>

<body>

<form name="form6" method="post" action="">

<textarea name="textarea" rows="9"></textarea>

</form>

</body> </html>

Compile o códito e terá o resultado.


Estilo CSS na tag <form>


<html>

<head>

<style type="text/css">

form.login {

background-color: #FFFFCC; width:380px;

font: 11px Verdana, sans-serif;

color: #003399;

border: 2px solid #0000FF;

padding-left:10px;

}

.campos {

background-color:#B0E0E6;

font: 11px georgia, sans-serif;

color:#0033CC;margin-right: 20px;

}

.botao {

background-color: #CC3300;

font: 10px Arial, sans-serif;

color: #CCFFFF;

} </style>

</head>

<body>

<form name="login"method="post" action="#" class="login">

<label>Usuário:

<input name="user" type="text" tabindex="1" size="15" class="campos">

</label>

<label>Senha:

<input name="password" type="password" tabindex="2" size="15" class="campos">

<input type="submit" name="Submit" value="OK" tabindex="3" class="botao">

</label>

</form>

</body>

</html>


Compile o código e terá o resultado.








Aula de JavaScript


JavaScript é uma linguagem de programação interpretada . Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.


Caixas de Diálogo ou de Mensagem

O javaScript coloca á disposição três caixas de mensagens: ºalert() ºprompt() ºconfirm()



Usando alert()

Veja o código abaixo:

<html> <head> <meta charset="utf-8"> <script>

alert("Bem vindo ao JavaScript !! ");

</script>


</head> <body>

</body> </html>


Compile o código e terá o resultado.


Usando prompt()


Veja o código abaixo


<html>

<head> <title>Aula JavaScript</title> <meta charset="utf-8"> <script> nome = window.prompt("Por Favor , Digite seu nome:",""); document.write("Seja bem vindo " +nome);


</script>

</head>

<body>

</body> </html>


Compile o código e terá o resultado.


Usando confirm()

A caixa de diálogo é chamada pela função CONFIRM() e tem apenas dois botôes : um OK e outro Cancelar.


<html>

<head> <meta charset="utf-8"> <script> escolha = confirm("Clique em um botao");

</script> </head>

<body>

</body> </html>

Compile o código e terá o resultado.

Disponível em “http://wiki.foz.ifpr.edu.br/wiki/index.php?title=Wiki_Cursos_IFPR_Foz:Sobre&oldid=60”