Sie sind auf Seite 1von 44

HTML?

Podemos definir al HTML como la lengua materna que habla nuestro navegador.

HTML
HTML es un lenguaje que hace posible presentar informacin.

Para qu puedo usar HTML?


Si quieres crear sitios web, no hay otra solucin que aprender HTML. HTML es la abreviatura de "HyperText Mark-up Language"

Y qu es XHTML?
Extensible HyperText Mark-up Language En pocas palabras, es una forma de escribir HTML nueva y mejor estructurada.

Cmo programamos HTML?


Al igual que todos los lenguajes, HTML tiene su propia sintaxis que son llamadas TAGS y que regularmente vienen en pares, una que inicia y otra que termina.

Cmo programamos HTML?


Encontraremos cdigo como este: <html></html> <input></input> Tambin podemos encontrarlo as: <input />

Estructura de una pagina web


<!-- declaramos un documento html --> <html> <!-- cabecera de la pgina web --> <head> </head> <!-- cuerpo del documento --> <body> </body> </html>

Generemos una pgina


Escriban el siguiente cdigo en un blog de notas. <html>
<head> </head> <body> Esta es mi primera pgina web </body> </html>

Generemos una pgina


Cambiemos el titulo de la pagina en la pestaa que aparece: <head>
<title> prueba UNITEC </title>

</head>

Practicas
Practica #1 .- Hacer una pgina web que muestre el mensaje: HOLA MUNDO, MI PRIMERA PGINA WEB. Practica #2 .- Hacer una pgina web que utilice listas <ul> y presente los das de la semana, luego que esos mismos das los presente en una lista ordenada.

Practicas
Practica #3.- Hacer una pgina web que use listas anidadas para mostrar el temario de una materia. Practica #4.- Hacer una pgina que muestre el mismo mensaje con diferente tipo de formato(negritas,tachado,cursiva,subrayado )

Practicas
Practica #5.- Hacer una pgina que sea un login, deber llevar 2 etiquetas, 2 campos de texto, 2 botones, color de fondo, los elementos debern de estar centrados en la pgina, tanto horizontal como verticalmente.

Practicas
Practica #6.- Hacer una pgina que use un combo box con los meses del ao, seleccione el sexo por medio de radio button, seleccione deportes por check boxes, muestre 5 palabras del diccionario con su significado en una tabla, en la tercer columna un hipervnculo a su wiki.

Otros componentes
Podemos aadir componentes que le den una mejor vista a nuestra pagina, como son:
Imgenes Videos Fieldset Css

Fuente de estudios

Pueden checar el siguiente enlace para estudiar HTML. http://es.html.net/tutorials/html/

JavaScript?
Es un lenguaje de programacin INTERPRETADO y orientado a objetos. Su uso es primordialmente para aplicarlo del lado del cliente. Mejora la interfaz de usuario. Podemos programas WIDGETS.

JavaScript
JavaScript se dise con una sintaxis similar a C. Adopta nombres y convenciones del lenguaje JAVA

JavaScript
Sin embargo Java y JavaScript no estn relacionados y tienen semnticas y propsitos diferentes.

JavaScript
Todos los navegadores modernos interpretan el cdigo JavaScript integrado en las pginas web.

JavaScript
Por lo general JavaScript es un lenguaje de EVENTOS!!! Esto es que reacciona a las acciones que el usuario realiza. Con JavaScript podemos crear diferentes efectos e interactuar con nuestros usuarios.

JavaScript
Cmo identificar cdigo JavaScript? podemos encontrarlo dentro de las etiquetas <body></body> de nuestras pginas web. se insertan entre: <script></script>.

JavaScript
Tambin pueden estar ubicados en archivos externos usando: <script type="text/javascript" src="micodigo.js"></scr ipt>

JavaScript
Un poco de cdigo!!!! Variables: var = Hola, n=103 Condiciones: if(i<10){ } Ciclos: for(i; i<10; i++){ } Arreglos: var miArreglo = new Array(12, 77, 5)

JavaScript
Ejemplo: <script type="text/javascript"> function aprietame( ){ alert("T muy bien!!!.. as se hace"); } </script>

JavaScript - Eventos
Son la manera que tenemos en JavaScript de controlar las acciones de los visitantes y definir un comportamiento de la pgina cuando se produzcan.

JavaScript
Como podra ser que un usuario pulse sobre un botn, edite un campo de texto o abandone la pgina

JavaScript
Es el caballo de batalla para hacer pginas interactivas, porque con ellos podemos responder a las acciones de los usuarios.

JavaScript
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.

JavaScript
evento onBlur onChange onClick Se produce cuando: Un elemento de formulario, una ventana o un marco pierden el foco El valor de un campo de formulario cambia Se hace click en un objeto o formulario

onDblClick
onFocus onKeyPress onKeyUp

Se hace click doble en un objeto o formulario


una ventana, marco o elemento de formulario recibe el foco El usuario pulsa una tecla El usuario libera una tecla

JavaScript
Evento onLoad onMouseMove onMouseOver Se produce cuando: El navegador termina la carga de una ventana El usuario mueve el puntero El puntero entra en una rea o imagen

onSubmit
onUnload

El usuario enva un formulario


El usuario abandona una pgina

JavaScript
Ejemplo: <INPUT TYPE="text" onChange="CompruebaCampo(this)"> El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efecta la llamada a la funcin (en este caso, el campo del formulario).

JavaScript Objeto FORM

El objeto form es un sub-objeto del objeto document y este a su vez, lo es del objeto window.

JavaScript
As como para crear una pgina en HTML se utilizan las etiquetas <HTML> Y </HTML>, lo mismo sucede con un formulario: el formulario debe estar contenido entre las etiquetas <form> y </form> .

JavaScript
En principio la sintaxis bsica para referirnos a un formulario sera: window.document.forms.nombre_del_for mulario

Sin ningn problema podemos prescindir de WINDOWS.DOCUMENT.FORMS

JavaScript
propie descripcin dad
name

es el nombre nico del formulario. es el lugar al cual se enva el formulario para ser procesado. El action define la URL a la cual se enva dicho formulario.
mtodo de envo de los datos insertados en un formulario. El method puede ser: GET = enva los datos en una cadena "visible". Conveniente para enviar pocos datos. POST = enva los datos en forma "invisible". Conveniente para enviar una gran cantidad de datos. define la ventana o marco (frame) en la que se mostrarn o procesarn los resultados del formulario. El valor es el mismo que el utilizado en HTML (blank, self, top, nombre_marco, etc..)

action

method

target

JavaScript

<form name="nombre_formulario" action="procesar.html" method="POST" target="_blank"> .......campos.... </form>

JavaScript
Mtodos del objeto FORM
mtodo descripcin

submit

enva el formulario. restablece el formulario a los valores por defecto.

reset

JavaScript
<form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank"> .......campos.... <input type="submit" value="enviar formulario"> <input type="reset" value="borrar"> </form>

Practicas
Practica #8.- En la pantalla de loggin validar que no se pueda enviar si no estn los 2 campos llenos. Validar que no tengan nmeros, solo letras. Validar que el usuario sea de 5 posiciones. Validar que la contrasea sea mayor a 4 posiciones.

Practicas
Practica #9.- En una pgina, poner un combo-box, validar que se selecciono una opcin y no la que esta por default. Poner una imagen que al pasar sobre ella nos despliegue un mensaje. Poner 2 radio buttons y validar que se seleccione alguno.

Practicas
Practica #10.- Formulario con 5 campos de texto, en el primer campo validar que cuando se apriete una tecla no sea nmero. En el segundo campo validar que cuando se suelte la tecla no sea un carcter raro. En el tercer campo al perder el foco mandar un alert de que es un campo obligatorio.

En el cuarto campo validar que cuando le llegue el foco mande un alert que diga el nombre del componente que tiene el foco. En el quinto campo validar que no se metan letras. Al terminar de cargar la pgina ponga el foco en el 5to text field.