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
 CSS
http://www.w3schools.com/css/
 Programación web
http://ingenieriasimple.com/introprogra/
 Scripts

http://www.hscripts.com/index.php
HTML – CSS – Javascript
Página Web
•• Párrafos ••Tablas
Párrafos
• Encabezados
Tablas
• Capas
Estructura
Estructura •• Listas •• Etc.
Capas
HTML
Encabezado • Etc.
s
• Textos
• Listas
Contenido
Contenido • Imágenes
• Enlaces
• Formularios

• Colores • Fondos
CSS
Apariencia • Tipografías
• Alineación
• Tamaños
• Etc.

• Efectos
Javascript
Comportamiento • Validaciones
• Automatización
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 con
 Contenido normal, código html y además
 Controles (elementos especiales) y etiquetas.
 Suelen servir para suministrar
 Información
 Indicaciónde 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>
 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

9
 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

10
 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”
11
 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

12
 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
13
 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")

14
 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

15
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)
<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>

Ver ejemplo
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: En la hoja de estilos se define el formato

<h2>Introducción a HTML UPC- de los
UB</h2> encabezados h2:
h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman",
serif;
Contenido-Estilo-Comportamiento
 Laaparició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.
Formatos CSS
 Propiedades de fuentes
 Propiedades de color y fondo
 Propiedades de texto Margin (Margen)
 espaciado de palabras Border (Borde)
Padding (Relleno)
 alineación
 Propiedades de caja Contenido

 Margen
 Borde
 Relleno
 Estilos de listas
 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)
h2 {
 Propiedad text-align: center;
 Valor
color: blue;
¿Qué podemos hacer con los estilos?
 Redefinir estilos de Etiquetas HTML. font: italic large
 Crear Estilos Personalizados para
uso genérico (Clases) "Times New Roman",
Crear Estilos para un elemento
serif;


HTML específico (por Id)

}
.textoresaltado {
 Como incluir estilos CSS
 Inline Styles <h2 style="color: blue; background:
Utilizando el atributo “style” se define el estilo green;">
de un elemento HTML en forma individual. Curso HTML UCEMA
</h2>
 Embedded Style
<head>
Se define la regla CSS dentro de un <style type="text/css">
documento HTML. Se puede aplicar a h2 {
font-style: italic;
cualquier elemento de ese documento. font-weight: bold;
 Hojas de Estilos externas color: blue;
}
Un archivo CSS independiente que se
</style>
encuentra referenciado en cada uno de los </head>
documentos HTML que desean utilizarlo. <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
 Índicede 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)
Etiqueta <SCRIPT> </SCRIPT>
 Sintaxis
<SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>

 Atributo SRC: fichero código fuente

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

 Colocándolo en la sección <HEAD> del HTML se asegura

que todo el código haya sido definido antes del <BODY>
del documento.
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 Gestor

blur 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 onChange

selecciona un elemento.
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 onSelect

formulario
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ístico
 Cálculo de tamaño muestral
 Cálculo de la potencia
 ....