• Author / Uploaded
• Raúl Flores Salinas

• Categories
• Hojas de estilo en cascada
• HTML
• Desarrollo de software
• Desarrollo web
• Hipertexto

Citation preview

FACULTAD DE INGENIERÍA ESCUELA ACADEMICA PROFESIONAL DE INGENIERÍA DE SISTEMAS CLASE N° 04

W3C y el Lenguaje XHTML

Mg. Orleans Moisés Gálvez Tapia

ESQUEMA DE LA SEPARACIÓN DE LOS CONTENIDOS Y SU PRESENTACIÓN

VENTAJA: Los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.

HOJAS DE ESTILO - CSS

Hay 2 formas de insertar una hoja de estilos:

Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:

HOJAS DE ESTILO INTERNAS

HOJAS DE ESTILO EXTERNAS

1°

2°

EJEMPLO 01 sin CSS

EJEMPLO 01 con CSS INTERNA

PASOS PARA CONVERTIR UNA CSS INTERNA en EXTERNA

… PASOS PARA CONVERTIR UNA CSS INTERNA en EXTERNA

PASO 1: Se crea un archivo de texto y se le añade solamente el siguiente contenido:

PASO 2: Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a que el archivo tenga extensión .css y no .txt

… PASOS PARA CONVERTIR UNA CSS INTERNA en EXTERNA

PASO 3: En la página HTML se enlaza el archivo CSS externo mediante la etiqueta :

Atributos de la etiqueta LINK: rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.

EJEMPLO 02 con CSS INTERNA

EJEMPLO 02 con CSS INTERNA

EJEMPLO 03 con CSS INTERNA

COMPONENTES DE UN ESTILO CSS BÁSICO

Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:

Regla: Está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).

COMPONENTES DE UN ESTILO CSS BÁSICO

Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:

Regla: Está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).

EJEMPLO 01 con CSS EXTERNA

General.css

EJERCICIO CALIFICADO 01

… EJ. CALIFICADO 01 - SOLUCIÓN

… EJ. CALIFICADO 01 - SOLUCIÓN

EJERCICIO CALIFICADO 02

… EJ. CALIFICADO 02 - SOLUCIÓN

… EJ. CALIFICADO 02 - SOLUCIÓN

EJERCICIO CALIFICADO 03

… EJ. CALIFICADO 03 - SOLUCIÓN

… EJ. CALIFICADO 03 - SOLUCIÓN

Recordando …

Para disponer un select se utiliza la marca:

El texto que va fuera de las marcas es el que se muestra en el formulario, y la propiedad value es la que se envía al formulario y se debe consultar en la página php que procesa el formulario.

EJERCICIO CALIFICADO 04

… EJ. CALIFICADO 04 - SOLUCIÓN

… EJ. CALIFICADO 04 - SOLUCIÓN

Validar Formularios con Isset() Esta función nos permite comprobar si una variable se ha definido y en ese caso devuelve un True. La sintaxis es:

isset($variable)

Es muy útil para comprobar si se han rellenado los campos de un formulario Ejemplo: La función isset recibe como parámetro la variable a verificar, devolviendo un valor TRUE si la variable está definida, de lo contrario devuelve FALSE. Ejemplo: $Precio = 27.54; if (isset($Precio)) echo("La variable está definida"); else echo("La variable no está definida"); En este caso se imprimirá la leyenda: La variable está definida. También se puede utilizar la función isset con objetos, como por ejemplo, para saber si se ha pulsado un botón o no.

…Validar Formularios con Isset()

$nombre=null ;

$nombre=“MARYCIELO”;

$nombre=“”;

Resuelto

EJERCICIO 01 – FORMULARIOS RECURSIVOS Ejemplo con ISSET(): Crear un formulario con un solo campo a rellenar, con isset() comprobar si ha sido enviado y muestre un mensaje por pantalla. formulario.php

formulario.php

SOLUCIÓN EJERCICIO 01 – FORMULARIOS RECURSIVOS

formulario.php

RECUPERAR y PROCESAR LOS DATOS QUE VIENEN DESDE EL FORMULARIO

…SOLUCIÓN EJERCICIO 01 – FORMULARIOS RECURSIVOS

formulario.php

Resuelto EJERCICIO 02 – FORMULARIOS RECURSIVOS Suma.php

Suma.php

SOLUCIÓN EJERCICIO 02 – FORMULARIOS RECURSIVOS

Funcion suma



CÓDIGO HTML DEL FORMULARIO



SOLUCIÓN EJERCICIO 02 – FORMULARIOS RECURSIVOS

Funcion suma



?>

Numeros.php



Ingrese el intervalo para los números

Valor 1:  
Valor 2:  





EJERCICIO CALIFICADO 05 Numeros.php

Numeros.php

producto.php

EJERCICIO CALIFICADO 06

producto.php

function Nombre_Funcion (parametro1, parametro2, ... parámetro n) { Instrucciones;

}

… EJ. CALIFICADO 06 - SOLUCIÓN

… EJ. CALIFICADO 06 - SOLUCIÓN

Al cargarse la página, se visualiza el formulario para el ingreso de los dos valores, ya que al no haber sido presionado el Botón, la condición del if en el programa principal, es falsa.

EJERCICIO CALIFICADO 07

par.php

par.php

… EJ. CALIFICADO 07 - SOLUCIÓN

… EJ. CALIFICADO 07 - SOLUCIÓN

EJERCICIO CALIFICADO 08

mayuscula.php

mayuscula.php

… EJ. CALIFICADO 08 - SOLUCIÓN

… EJ. CALIFICADO 08 - SOLUCIÓN

EJERCICIO CALIFICADO 09 cuadrado.php

cuadrado.php

… EJ. CALIFICADO 09 - SOLUCIÓN

… EJ. CALIFICADO 09 - SOLUCIÓN