Lab01.1 HTML CSS JavaScript

HTML, CSS y JavaScript
Ing. Freddy Infantes Quiroz

finfantesq@upao.edu.pe
freddyhiq@hotmail.com
2013
Programacin de Aplicaciones Web
UPAO : Escuela de Ingeniera de Computacin y Sistemas
Curso: Programacin de Aplicaciones Web
Ciclo : 2013
Agenda
HTML
Estructura Bsica
Elementos de HTML
CSS
Ventajas
Estructura de un archivo CSS
Tipos de Estilos.
JAVASCRIPT
Ubicacin del cdigo
Elementos de JavaScript
Objetos Predefinidos
Eventos
Ciclo : 2013
Pgina Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
JavaScript
Colores
Tipografas
Alineacin
Efectos
Validaciones
Automatizacin
Prrafos
Encabezados
Listas
Tablas
Capas(Divs)
Etc.
Textos
Imgenes
Enlaces
Fondos
Tamaos
Etc.
Introduccin
Ciclo : 2013
HTML
Lenguaje de marcado que nos permite describir la estructura y el contenido en
forma de texto para la creacin de una pgina Web.
Un documento HTML esta Compuesto de tags.
Sintaxis:
Nota:
Se pueden crear con cualquier Editor de texto.
Interpretado por diferentes Navegadores
<tag> Texto afectado </tag>
Ciclo : 2013
Estructura Bsica
<HTML> Inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del ttulo del documento.
Ttulo de la pgina
</TITLE> Final del ttulo del documento.
...
</HEAD> Final cabecera del documento.
<BODY> Inicio del cuerpo del documento.
Contenido de la pgina
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.
Ciclo : 2013
CSS (Hojas de Estilo en Cascada)
Las hojas de estilo en cascada (CSS) son un lenguaje formal usado para
definir la presentacin esttica de un documento estructurado y escrito en
HTML.
El Objetivo al desarrollar Hojas de Estilo, es separar la estructura y el
contenido de la presentacin esttica en un documento HTML.
Esto permite un control mayor del documento y sus atributos convirtiendo
al HTML en un documento muy verstil y liviano.
Ciclo : 2013
Ventajas
Control centralizado de la presentacin de un sitio web completo con lo
que se agiliza de forma considerable la actualizacin del mismo.
El documento HTML en s mismo es ms claro de entender y se
consigue reducir considerablemente su tamao.
Los Navegadores permiten a los usuarios especificar su propia hoja de
estilo local que ser aplicada a un sitio web remoto, con lo que aumenta
considerablemente la accesibilidad.
Ejemplo: personas con deficiencias visuales pueden configurar su propia
hoja de estilo para aumentar el tamao del texto o remarcar ms los
enlaces.
Ciclo : 2013
Una hoja de estilo esta formada por un nmero de reglas de estilo, que
tienen las siguiente estructura:
Sintaxis:
Nombre del Estilo y
define a qu elementos
se va aplicar.
Propiedad y Valor,
definen el Estilo y como
se va a mostrar al Usuario
Ejemplo:
Selector{
property1: value1
property2: value2
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-align: center;
}
Ciclo : 2013
Antes de la aparicin de los estilos, la presentacin se manejaba directamente
dentro de los elementos HTML por medio de atributos.
Por Ejm:
<h2 align="center">
<font color=blue" size=3" face="Times New Roman, serif">
<i>Hola PAW</i>
</font>
</h2>
CSS permite separar el contenido de un documento de su presentacin.
En el documento HTML:
<h2>Hola PAW</h2>
En la hoja de estilos se define el formato de los
encabezados h2:
h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman", serif;
}
Ciclo : 2013
Tipos de Estilos
Hoja de Estilo en Lnea
Utilizando el atributo style se define el estilo
de un elemento HTML en forma individual.
Hoja de Estilo Interna
Se define la regla CSS dentro de un documento
HTML. Se puede aplicar a cualquier elemento
de ese documento.
Hoja de Estilo externa
Un archivo CSS independiente que se
encuentra referenciado en cada uno de los
documentos HTML que desean utilizarlo.
<h2 style="color: blue; background: green;">
Hola PAW
</h2>
<head>
<style type="text/css">
h2 {
font-style: italic;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h2>Curso HTML UCEMA</h2>
</body>
<head>
<link rel= stylesheet type= "text/css
href=Estilos.css">
</head>
Ciclo : 2013
JavaScript
Es un lenguaje de tipo script, basado en objetos y guiado por eventos.
El cdigo JavaScript va incrustado en los documentos HTML, y se encargan de
realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones,
mostrar mensajes, crear animaciones, comprobar campos, etc.
Al ser un lenguaje del tipo script significa que no es un lenguaje compilado, si no
es un lenguaje interpretado por el navegador, con una sintaxis semejante a la del
lenguaje Java y el lenguaje C.
Ciclo : 2013
JavaScript
Ciclo : 2013
Ubicacin del Cdigo
Cuando el Script va dentro del documento HTML -> BODY
Ciclo : 2013
Ubicacin del Cdigo
Cuando el Script va dentro del documento HTML -> HEAD
Ciclo : 2013
Ubicacin del Cdigo
Cuando el Script esta en un archivo separado.
Ciclo : 2013
Comentarios:
Declaracin de Variables:
Para declarar una variable se puede emplear
var variable = valor;
Ciclo : 2013
Operadores
Operador Significado
+ Suma
- Resta
* Multiplicacin
/ Divisin
% Residuo
++ Incremento
-- Decremento
Ciclo : 2013
Operadores Lgicos:
Operadores de Comparacin:
&& AND ( Y Lgico)
|| OR (O Lgico)
! NOT (No Lgico)
&& AND ( Y Lgico)
|| OR (O Lgico)
! NOT (No Lgico)
Ciclo : 2013
Operadores de asignacin:
+= Suma y asignacin
-= Resta y asignacin
*= Producto y asignacin
/= Divisin y asignacin
%= Resto y asignacin
Ciclo : 2013
Estructuras de Control
Tienen la misma sintaxis que en java
Ciclo : 2013
Funciones:
Son una serie de instrucciones que realizan una determinada tarea, la forma de
declarar una funcin en JavaScript es de la sigte manera:
Nota:
Los argumentos son variables que la funcin necesita para realizar su tarea.
function nombFunc(arg1, arg2,)
{
//Instrucciones que debe realizar la funcin
}
Ciclo : 2013
Funciones Predefinidas
JavaScript trae consigo muchas funciones predefinidas sealemos aqu algunas
de las mas importantes:
parseInt(textonumero): Convierte una cadena a un numero
parseFloat(textonumero): Convierte una cadena a un real
isNaN(expresion): Devuelve verdadero si la expresin tiene un
contenido no numrico.
Ciclo : 2013
Objetos window y document:
Para cada pgina HTML, el navegador define un objeto window y un document
para usarlos con Javascript.
window:
Permite acceder a ciertas propiedades de la ventana en la que vemos la pgina.
Propiedades
- Status: Mensaje de la barra de estado.
- Document: Documento HTML visualizado.
Mtodos
- alert(msg):
Muestra una ventana con un mensaje
Ciclo : 2013
confirm(msg): Muestra una ventana con un botn de cancelar y otro de aceptar,
devuelve true si se ha pulsado aceptar y false si se ha pulsado cancelar.
prompt(msg,default): Muestra una ventana de entrada de datos , con un valor
por defecto.
open(url,nombre,opt): Abre una ventana del navegador.
close(): cierra la ventana.
Ciclo : 2013
document:
Permite acceder a todos los elementos de la pgina HTML que estamos
viendo.Esta incluido dentro del Objeto Window.
Propiedades:
- bgColor -> Color del fondo
- fgColor -> Color del texto.
- linkColor -> Color de los enlaces normales.
- vlinkColor -> Color de los enlaces visitados
- alinkColor -> Color de los enlaces activos.
- images -> Array que contiene todas las imgenes del documento.
El ndice del array empieza por 0, la imagen
document.images[0] ser la primera que se utiliz en el cdigo.
Ejemplo: document.images[0].src = grafico2.gif
//Hace que la primera imagen muestre el grfico grafico2.gif
Ciclo : 2013
Mtodos:
clear() -> Borra el documento.
write(textoHTML) -> Escribe el texto indicado en el documento. Ese texto
puede contener si se desea etiquetas HTML
writeln(textoHTML) -> Lo mismo que la anterior, slo que esta aade un salto
de linea tras escribir el texto.
close() -> Cierra el documento.
Ciclo : 2013
Ejemplo:
<SCRIPT>
var nueva;
function abrir() {
nueva = window.open("http://www.goole.com.pe", "abierta",
"toolbar=yes, location=yes, menubar=yes, resizable=yes" );
}
function cerrar() {
nueva.close();
}
</SCRIPT>
<a href= onClick="abrir(); return false;"> abre una ventana </a>
<a href=" onClick="cerrar(); return false;"> cierrala</a>
Ciclo : 2013
Eventos
Un evento es suceso que ocurre cuando el usuario realiza alguna accin.
Mover el ratn
Pulsar una tecla
etc.
Nota:
Algunos eventos no los genera el usuario sino el Navegador al momento de
cargar una pgina.
Entre comillas podemos invocar a una funcin JavaScript o poner varias
instrucciones directamente.
<Etiqueta atributo=valor onEvento=progJS;>
Cuando suceda ese
evento al elemento, se
ejecuta un programa
Ciclo : 2013
Eventos
Ejemplo:
<SCRIPT>
function mensaje()
{
alert( Hola PAW" );
}
</SCRIPT>
<A HREF= "http://www.paw.com" onMouseOver=mensaje(); >
Pasa el cursor por encima de este enlace
</A>
Ciclo : 2013
Eventos
Tabla de Eventos asociados a etiquetas
Ciclo : 2013
Lista de Eventos
Lista de eventos compatibles en Netscape y en Explorer.
onClick:
Se produce cuando el usuario hace clic en el objeto. Slo los vnculos y los
botones de los formularios permiten capturar este evento en ambos
navegadores.
onDblClick:
Se genera cuando el usuario hace doble clic con el ratn. Slo los vnculos
admiten este evento en ambos navegadores.
onMouseOver:
Se produce cuando el usuario pasa el cursor por encima del objeto. Slo los
vnculos permiten este evento en ambos navegadores.
onMouseOut:
Ocurre cuando el usuario abandona el objeto. Slo los vnculos permiten este
evento en ambos navegadores.
Ciclo : 2013
Lista de Eventos
onMouseDown:
Se produce cuando el usuario mantiene pulsado el botn principal del ratn a la
vez que se sita encima de un objeto. Funciona en los vnculos, en los botones y
en las imgenes.
onMouseUp:
Ocurre cuando el usuario levanta el botn del ratn. Funciona en los mismos
casos que el anterior.
onMouseMove:
Sucede cuando el usuario mueve el ratn. En Netscape ninguna etiqueta lo
admite.
onKeyDown, onKeyPress y onKeyUp:
Ocurren respectivamente cuando el usuario pulsa una tecla, cuando la mantiene
pulsada y cuando la suelta. Tienen poca utilidad y pocas etiquetas los admiten.
Ciclo : 2013
Elementos HTML
onLoad:
Se produce cuando la pgina se est cargando. La etiqueta BODY es la idnea
para este evento.
onUnload:
Se produce cuando la pgina se est descargando, porque se est cargando otra
o porque se cierra el navegador. La etiqueta BODY es la idnea para este evento.
onResize:
Ocurre cuando se cambia el tamao de la ventana. La etiqueta BODY o la FRAME
son las que manejan este evento.
onBlur:
Se produce cuando un objeto pierde el foco (deja de ser el objeto activo). La
etiqueta BODY, los botones, cuadros de formulario y los enlaces admiten esta
propiedad.
Ciclo : 2013
Elementos HTML
onFocus:
Sucede cuando un objeto gana el foco (pasa a ser el objeto activo). La etiqueta
BODY, los botones, cuadros de formulario y los enlaces admiten esta propiedad.
onAbort:
Se produce si el usuario pulsa el botn Detener mientras se estaba cargando una
imagen. La etiqueta IMG es la que maneja este evento.
onError:
Se produce cuando ocurre un error. Casi todas lo permiten, no obstante su uso no
parece muy interesante.
onChange:
Se produce cuando el usuario cambia el contenido de un cuadro de texto de un
formulario.
Ciclo : 2013
Elementos HTML
onSelect:
Ocurre cuando el usuario selecciona texto de un cuadro del formulario.
onSubmit:
Ocurre cuando un formulario es enviado a su servidor. Es pues un evento de la
etiqueta FORM.
onReset:
Sucede cuando un formulario es anulado mediante su botn Reset. Es pues un
evento de la etiqueta FORM.
Ciclo : 2013
Ing. Freddy Infantes Quiroz Ing. Freddy Infantes Quiroz Ing. Freddy Infantes Quiroz Ing. Freddy Infantes Quiroz
Muchas Gracias
Programacin de Aplicaciones Web

Lab01.1 HTML CSS JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab01.1 HTML CSS JavaScript

Uploaded by

Copyright:

Available Formats

HTML, CSS y JavaScript

Ing. Freddy Infantes Quiroz

You might also like