LENGUAJE HTML (2)

Introducción a las páginas web dinámicas

Alex Sánchez

Contenido

Introducción Formularios CSS Javascript

Enlaces interesantes Formularios

http://www.w3.org/TR/html4/interact/forms.html

CSShttp://www.w3schools.com/css/

Programación webhttp://ingenieriasimple.com/introprogra/

Scripts

http://www.hscripts.com/index.php

Página Web

HTML – CSS – Javascript

Estructura

Contenido

Apariencia

HTML

CSS

Javascript

• Párrafos• Encabezados• Listas

•Tablas• Capas• Etc.

• Fondos• Tamaños • Etc.

Estructura• Párrafos• Encabezados• Listas

•Tablas• Capas• Etc.

Contenido• Textos• Imágenes• Enlaces

• Colores• Tipografías• Alineación

Comportamiento• Efectos• Validaciones• Automatización

• Formularios

HTML+CSS+Javascripts: Páginas dinámicas (1)

HTML básico --> páginas estáticas correctas, pero limitadas

Si el número de páginas aumenta cuesta mantener un aspecto homogéneo.

No es posible interactuar con el contenido de la página ni con el servidor,

Algunos elementos avanzados solucionan estos problemas

CSS: Gestionar el aspecto de un grupo de páginas de forma homogénea

Formularios:

Permiten introducir información que podrá enviarse a otros usuarios

Permiten instalar controles que pueden usarse para desencadenar acciones

CGIs: Permiten ejecutar programas en el servidor a partir de información proporcionada por el cliente.

Scripts: Permiten ejecutar programas en el navegador mismo. Para ello se necesita

Formularios para introducir la información

Lenguaje de scripting como Javascript, VBAscript

Formularios ¿Para qué sirven?

Elementos para Formularios Campos de Texto Casillas de Verificación Botones de opción Menús Botones Campos ocultos Campos de carga de archivos

¿Cómo se envía la información?

¿Se pueden validar los Campos?

http://www.w3.org/TR/html4/interact/forms.html

Formularios

Secciones de un documento conContenido normal, código html y ademásControles (elementos especiales) y etiquetas.

Suelen servir para suministrar InformaciónIndicación de acción

que se envia a un servidor

Formularios Elemento <FORM>

Atributos: method, action

Elemento <INPUT>

Atributo: type (text, checkbox, radio, button, hidden)

Elemento <SELECT>

Elemento <TEXTAREA>

9

The <form> tag

The <form arguments> ... </form> tag encloses form elements (and probably other HTML as well)

The arguments to form tell what to do with the user input action="url" (required)

Specifies where to send the data when the Submit button is clicked

method="get"(default) Form data is sent as a URL with ?form_data info appended to the end Can be used only if data is all ASCII and not more than 100 characters

method="post" Form data is sent in the body of the URL request Cannot be bookmarked by most browsers

target="target" Tells where to open the page sent as a result of the request target= _blank means open in a new window target= _top means use the same window

10

The <input> tag

Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is type can be text, checkbox, radio, password, hidden, submit, reset,

button, file, or image

Other common input tag arguments include: name: the name of the element value: the “value” of the element; used in different ways for different

values of type readonly: the value cannot be changed disabled: the user can’t do anything with this element Other arguments are defined for the input tag but have meaning

only for certain values of type

11

Buttons

A submit button: <input type="submit" name="Submit" value="Submit">

A reset button: <input type="reset" name="Submit2" value="Reset">

A plain button: <input type="button" name="Submit3" value="Push Me">

submit: send data

reset: restore all form elements to their initial state

button: take some action as specified by JavaScript

• Note that the type is input, not “button”

12

Checkboxes

A checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked>

type: "checkbox" name: used to reference this form element from JavaScript value: value to be returned when element is checked Note that there is no text associated with the checkbox—you

have to supply text in the surrounding HTML

13

Radio buttons

Radio buttons:<br><input type="radio" name="radiobutton" value="myValue1">male<br><input type="radio" name="radiobutton" value="myValue2" checked>female

If two or more radio buttons have the same name, the user can only select one of them at a time This is how you make a radio button “group”

If you ask for the value of that name, you will get the value specified for the selected radio button

As with checkboxes, radio buttons do not contain any text

14

Drop-down menu or list

A menu or list:<select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option></select>

Additional arguments: size: the number of items visible in the list (default is "1") multiple: if set to "true", any number of items may be

selected (default is "false")

15

Hidden fields

<input type="hidden" name="hiddenField" value="nyah"> &lt;-- right there, don't you see it?

What good is this? All input fields are sent back to the server, including hidden fields This is a way to include information that the user doesn’t need to

see (or that you don’t want her to see) The value of a hidden field can be set programmatically (by

JavaScript) before the form is submitted

Ejemplo de formulario (1)

<HTML> <HEAD> <TITLE>Un formulario sencillo</TITLE> </HEAD> <BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST"> <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM>

</BODY> </HTML>

Ver ejemplo

Ejemplo de formulario (2)

Ver ejemplo

<HTML> <HEAD> <TITLE>Entrada de datos a un formulario</TITLE> </HEAD> <BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST"> Texto: <INPUT TYPE="text" NAME="nombre"><BR> Password: <INPUT TYPE="password" NAME="contra"><BR> Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre <INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR> Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto <INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche

<BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM>

</BODY> </HTML>

Ejercicio 1

Dirígete a la webdel curso Diseño de Materiales Multimedia_Web 2.0, tema “Formularios”

http://www.isftic.mepsyd.es/formacion/materiales/107/cd/html/html0901.html

Repasa la creación de formularios con Kompozery crea Un formulario de “contacto”que se envíe por mail Un formulario de búsqueda en googleo traducción

mediante Babylon

Hojas de Estilos CSS

Que son los CSS CSS significa “Cascading Style Sheets” y es un

sencillo sistema para enlazar estilos con elementos de HTML.

Las hojas de estilo (“Style Sheets”) son plantillas parecidas a las habituales de ofimática con una serie de reglas declaradas para los elementos a los que se aplicarán.

El “Cascading” permite definir la importancia de una regla individual (dar prioridades) con el fin de evitar conflictos cuando se intenta aplicar dos reglas distintas al mismo elemento.

Estilos CSS Antes de la aparición de los estilos, la presentación se manejaba directamente

dentro de los elementos HTML por medio de atributos. Por ejemplo:

<h2 align="center">

<font color=“blue" size=“3" face="Times New Roman, serif">

<i>Introducción a HTML. UPC-UB </i>

</font>

</h2> CSS permite separar el contenido de un documento de su presentación.

En el documento HTML:

<h2>Introducción a HTML UPC-

UB</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;

}

Contenido-Estilo-Comportamiento

La aparición de los CSS permite adoptar un nuevo paradigma de desarrollo web

HTML CSS Javascript

Contenido Estilo Comportamiento

Ventajas del uso de CSS Estandarizar la presentación de un sitio web completo.

Haciendola fácil de mantener.

Diferentes usuarios pueden contar con diferentes estilos acordes

a sus necesidades. Ejemplos:

Estilos para personas con dificultades visuales,

Estilos para dispositivos móviles,

Estilos para dispositivos monocromos,

Estilos para impresión,

Etc.

Los documentos HTML se reducen en tamaño y complejidad.

Margin (Margen)

Border (Borde)

Formatos CSS

Propiedades de fuentes

Propiedades de color y fondo

Propiedades de texto

espaciado de palabras

alineación

Propiedades de caja

Margen

Borde

Relleno

Estilos de listas

Padding (Relleno)

Contenido

Estilos CSS

Una hoja de estilos consiste en un conjunto de reglas.

Cada regla esta formada por:

El Selector (nombre del estilo)

La Declaración (define el estilo)

Propiedad

Valor

¿Qué podemos hacer con los estilos?

Redefinir estilos de Etiquetas HTML.

Crear Estilos Personalizados para

uso genérico (Clases)

Crear Estilos para un elemento

HTML específico (por Id)

h2 {

text-align: center;

color: blue;

font: italic large

"Times New Roman",

serif;

}

.textoresaltado {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;font-weight: bold; /* Esto es un comentario */color: #000000;

}#logo {

background-image: url("/img/logo.gif");background-position:center; background-repeat:no-repeat;height: 50px; width: 150px;position: absolute; left: 0px; top: 0px;

}

Como incluir estilos CSS Inline Styles

Utilizando el atributo “style” se define el estilo

de un elemento HTML en forma individual.

Embedded Style

Se define la regla CSS dentro de un

documento HTML. Se puede aplicar a

cualquier elemento de ese documento.

Hojas de Estilos externas

Un archivo CSS independiente que se

encuentra referenciado en cada uno de los

documentos HTML que desean utilizarlo.

<h2 style="color: blue; background: green;">Curso HTML UCEMA

</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>

Ejercicio 2

Dirígete a la web del curso Diseño de Materiales Multimedia_Web 2.0, tema “Hojas de estilos”

http://www.isftic.mepsyd.es/formacion/materiales/107/cd/html/html07.html

Repasa la creación de hojas de estilos con Kompozer y crea una hoja de estilos que te permita dar formato a tu página web

El lenguaje Javascript

¿Qué es un lenguaje de Script? Scripting ≠ System programming

Unos no sustituyen a los otros sino que están orientados a cosas diferentes.

Extienden las capacidades de la aplicación con la que trabajan.

Raramente se usan para algoritmos y estructuras de datos complejas.

Tienden a ser simples Ausencia de tipos (o pocos). Los errores se detectan en tiempo de ejecución. Un programa puede escribir otro y ejecutarlo. Menos código y programas más flexibles.

Problemas de SEGURIDAD

Javascript Lenguaje de Script más popular. Extiende las capacidades de las páginas Web Código integrado en el HTML Se interpreta en el ordenador que recibe el

HTML, no se compila. Ejecución dinámica

Los programas y funciones no se chequean hasta que se ejecutan.

Trabaja con los elementos del HTML. No se declaran los tipos de variables. También elementos avanzados (OOP).

Ejemplos de uso de Javascript

Comprobar/validar formularios. Comprobar que se han rellenado

correctamente antes de enviarlos. Realizar cálculos simples

Índice de masa corporal.Cálculo de tamaño muestral, curvas ROC,..Dotar de interactividad una página web.Juegos...

Generalidades de JavaScript Modelo orientado al WWW

Elementos de una página HTML pueden causar un evento que ejecutará una acción

Esa acción se ejecutará a través de una serie de sentencias JavaScript

Comandos de JavaScript: Variables Expresiones Estructuras de control Funciones (bloques de sentencias) Clases, objetos y arrays (agrupaciones de datos)

Sintaxis

Atributo SRC: fichero código fuente

Colocándolo en la sección <HEAD> del HTML se asegura que todo el código haya sido definido antes del <BODY> del documento.

<SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>

Etiqueta <SCRIPT> </SCRIPT>

<SCRIPT type="text/javascript"> function valor_abs(form) { var num = eval(form.expr.value) if (num >= 0) form.result.value = num else num = -num form.result.value = num }</SCRIPT>

Donde incluir el Javascript Las instrucciones pueden ir dentro del elemento “script”:

<script language="JavaScript" type="text/JavaScript"><!--functionAbroVentana(URL,nombre,features) { //Esto es un comentario

window.open(URL,nombre,features);}//--></script>

Las funciones Javascript pueden estar en archivos independientes:<script language="JavaScript" src="archivo.js"> </script>

El código Javascript también se puede incluir directamente en un evento asociado a algún elemento del documento. Por ejemplo:<inputtype=“button" onclick="alert('Gracias por su click');return false;" value="Click">

Modelo de Eventos de JavaScript Javascript es un lenguaje basado en “eventos”: acciones concretas que al suceder pueden asociarse a la ejecución de comandos. Los eventos suceden a tres niveles:

A nivel del documento HTML A nivel de un formulario individual A nivel de un elemento de un formulario

El evento es gestionado por una sección de código en JavaScript (Gestor de Eventos)

<BODY onLoad="cargarfuncion()" onUnload="descargarfuncion()">

<FORM name="nombre_del_formulario" ... onSubmit="función_o_sentencia">

<INPUT type="button" name="mycheck" value="HA!" onClick= "alert(‘Te he dicho que no me aprietes’)">

Gestores de Eventos (Event Handlers)

Evento Ocurre Cuando Gestorblur El usuario quita el cursor de un elemento de formulario onBlur

click El usuario clica un link o un elemento de formulario onClick

change El usuario cambia el valor de un texto, un área de texto o selecciona un elemento.

onChange

focus El usuario coloca el cursor en un elemento de formulario. onFocus

load El usuario carga una página en el Navegador onLoad

Mouseover El usuario mueve el ratón sobre un link onMouseOver

Select El usuario selecciona un campo del elemento de un formulario

onSelect

Submit Se envía un formulario onSubmit

Unload Se descarga la página onUnload

Clases en Javascript Clases Predefinidas

Clase String: Cada vez que se asigna una cadena de caracteres a una variable, se crea un objeto de la clase String

Clase Math: Se usa para efectuar cálculos matemáticos Clase Date: Para el manejo de fechas y horas

Clases del Browser o Navegador: Tienen que ver con la navegación

Clases del Documento HTML–Están asociadas con cualquier elemento de una página Web (link, ancla, formulario, etc)

Clases definidas por el usuario

Jerarquía de clases

Ejercicio 3

Crear un documento html que incluya un javascript que realice algún sencillo cálculo estadísticoCálculo de tamaño muestralCálculo de la potencia....