Exibir código-fonte para Wiki Cursos IFPR Foz:Sobre


== 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>'''

'''<h1>TAG SELECT</h1>'''


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