sesion 04 - ucv-limanorte

Mg. Orleans Moisés Gálvez Tapia

FACULTAD DE INGENIERÍA

ESCUELA ACADEMICA PROFESIONAL

DE INGENIERÍA DE SISTEMAS

CLASE N° 04

W3C y el Lenguaje

XHTML

ESQUEMA DE LA SEPARACIÓN DE LOS CONTENIDOS Y SU

PRESENTACIÓN

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

VENTAJA:

HOJAS DE ESTILO - CSS

Una hoja de estilo externa puede ser enlazada a un

documento HTML mediante el elemento LINK de HTML:

Hay 2 formas de insertar una hoja de estilos:

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

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

… PASOS PARA CONVERTIR UNA CSS INTERNA en EXTERNA

rel: indica el tipo de relación que existe entre el recursoenlazado (en este caso, el archivo CSS) y la página HTML. Paralos archivos CSS, siempre se utiliza el valor stylesheet

type: indica el tipo de recurso enlazado. Sus valores estánestandarizados y para los archivos CSS su valor siempre estext/css

href: indica la URL del archivo CSS que contiene los estilos. LaURL indicada puede ser relativa o absoluta y puede apuntar aun recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilosdel archivo CSS. Más adelante se explican en detalle losmedios CSS y su funcionamiento.

Atributos de la etiqueta LINK:

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

Regla: Está compuesta de una parte de "selectores", unsí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

General.css

EJEMPLO 01 con CSS EXTERNA

EJERCICIO CALIFICADO 01

… EJ. CALIFICADO 01 - SOLUCIÓN

Para disponer un select se utiliza la marca:

<select name="select1">

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

Recordando…

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:

Validar Formularios con Isset()

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");elseecho("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.

<?php

if (isset($nombre)) {echo "Hola $nombre, bienvenido a PHP";

}else {echo "No has escrito nada";

}?>

$nombre=null;

…Validar Formularios con Isset()

$nombre=“”;$nombre=“MARYCIELO”;

Ejemplo con ISSET(): Crear un formulario con un solo campo a rellenar,con isset() comprobar si ha sido enviado y muestre un mensaje porpantalla.

EJERCICIO 01 – FORMULARIOS RECURSIVOS

Resuelto

formulario.php

formulario.php

formulario.php

formulario.php

formulario.php

RECUPERAR y PROCESAR LOS DATOS QUE VIENEN DESDE EL FORMULARIO

SOLUCIÓN EJERCICIO 01 – FORMULARIOS RECURSIVOS

formulario.php

…SOLUCIÓN EJERCICIO 01 – FORMULARIOS RECURSIVOS

EJERCICIO 02 – FORMULARIOS RECURSIVOS

Suma.php

Suma.php

Resuelto

<html>

<head>

<title>Funcion suma</title>

</head>

<body>

<?php

function suma($a,$b) {

$c=$a+$b;

return $c;

}

if (isset($_REQUEST['boton']))

{

// RECUPERAR y PROCESAR LOS DATOS DEL FORMULARIO}

else

{

?>

CÓDIGO HTML DEL FORMULARIO<?php

}

?>

</body>

</html>


DEFINICIÓN DE FUNCIONES

<html>

<head>

<title>Funcion suma</title>

</head>

<body>

<?phpfunction suma($a,$b) {

$c=$a+$b;

return $c;

}

if (isset($_REQUEST['boton']))

{

$n1=$_POST['n1'];

$n2=$_POST['n2'];

$n3=suma($n1,$n2);

echo "Sumar: $n1 + $n2 =$n3";

}

else

{

?>

…

<h1>Suma de dos números</h1>

<form action="suma.php" method="post">

<p>Escribe dos números:

Primer número: <input type="text" name="n1" /> ...

Segundo número: <input type="text" name="n2" />

<p><input type="submit" value="mostrar resultado" name="boton"/>

</form>

<?php}

?>

</body>

</html>


<Html>

<Title> Numeros.php </Title>

<Body>

<?PHP

if (isset($_REQUEST["boton"]))

{

$a=$_REQUEST["a"];

$b=$_REQUEST["b"];

echo "Números comprendidos entre $a y $b";

echo "<Hr>";

for ($i=$a+1; $i<$b; $i++)

{

echo ("$i - ");

}

}

else

{

?>

<FORM ACTION="numeros.php" METHOD="POST">

<H2>

Ingrese el intervalo para los números

<Hr>

Valor 1: &nbsp<INPUT TYPE="TEXT" NAME="a" SIZE="10">

<Br>

Valor 2: &nbsp<INPUT TYPE="TEXT" NAME="b" SIZE="10">

<Br><Br>

<INPUT TYPE="SUBMIT" NAME="boton" VALUE="Ingresar Datos">

<?PHP

}

?>

</Body>

</Html>

Numeros.php

Numeros.php


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

Instrucciones;<return valor>

}

EJERCICIO CALIFICADO 06producto.php

producto.php

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.


par.php

par.php


mayuscula.php


mayuscula.php

cuadrado.php


cuadrado.php

sesion 04 - ucv-limanorte

Documents