Mg.

Orleans Moiss Glvez Tapia

FACULTAD DE INGENIERA
ESCUELA ACADEMICA PROFESIONAL
DE INGENIERA DE SISTEMAS
CLASE N 04
W3C y el Lenguaje
XHTML
ESQUEMA DE LA SEPARACIN DE LOS CONTENIDOS Y SU
PRESENTACIN
Los documentos XHTML creados son ms flexibles, ya que se adaptan mejor
a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos
mviles, 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 aade
solamente el siguiente contenido:
PASO 2: Se guarda el archivo de texto con el nombre
estilos.css Se debe poner especial atencin a que el archivo
tenga extensin .css y no .txt
PASOS PARA CONVERTIR UNA CSS INTERNA en EXTERNA
PASO 3: En la pgina HTML se enlaza el archivo CSS externo mediante
la etiqueta <link>:
PASOS PARA CONVERTIR UNA CSS INTERNA en EXTERNA
rel: indica el tipo de relacin que existe entre el recurso
enlazado (en este caso, el archivo CSS) y la pgina HTML. Para
los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores estn
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. Ms adelante se explican en detalle los
medios CSS y su funcionamiento.
Atributos de la etiqueta LINK:
EJEMPLO 02 con CSS INTERNA
EJEMPLO 02 con CSS INTERNA
EJEMPLO 03 con CSS INTERNA
Las hojas de estilo en CSS estn compuestas de reglas. Cada
regla tiene tres partes:
Regla: Est compuesta de una parte de "selectores", un
smbolo de "llave de apertura" ({), otra parte denominada
"declaracin" y por ltimo, un smbolo de "llave de cierre"
(}).
COMPONENTES DE UN ESTILO CSS BSICO
Las hojas de estilo en CSS estn compuestas de reglas. Cada
regla tiene tres partes:
Regla: Est compuesta de una parte de "selectores", un
smbolo de "llave de apertura" ({), otra parte denominada
"declaracin" y por ltimo, un smbolo de "llave de cierre"
(}).
COMPONENTES DE UN ESTILO CSS BSICO
General.css
EJEMPLO 01 con CSS EXTERNA
EJERCICIO CALIFICADO 01
EJ. CALIFICADO 01 - SOLUCIN
EJ. CALIFICADO 01 - SOLUCIN
EJERCICIO CALIFICADO 02
EJ. CALIFICADO 02 - SOLUCIN
EJ. CALIFICADO 02 - SOLUCIN
EJERCICIO CALIFICADO 03
EJ. CALIFICADO 03 - SOLUCIN
EJ. CALIFICADO 03 - SOLUCIN
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 la
propiedad value es la que se enva al formulario y se debe consultar en la pgina
php que procesa el formulario.
Recordando
EJERCICIO CALIFICADO 04
EJ. CALIFICADO 04 - SOLUCIN
EJ. CALIFICADO 04 - SOLUCIN
Esta funcin 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 funcin isset recibe como parmetro 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.
Tambin se puede utilizar la funcin isset con objetos, como por ejemplo, para
saber si se ha pulsado un botn 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 por
pantalla.
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
SOLUCIN EJERCICIO 01 FORMULARIOS RECURSIVOS
formulario.php
SOLUCIN 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
{
?>
CDIGO HTML DEL FORMULARIO
<?php
}
?>
</body>
</html>
SOLUCIN EJERCICIO 02 FORMULARIOS RECURSIVOS
DEFINICIN DE FUNCIONES
<html>
<head>
<title>Funcion suma</title>
</head>
<body>
<?php
function 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 nmeros</h1>

<form action="suma.php" method="post">
<p>Escribe dos nmeros:
Primer nmero: <input type="text" name="n1" /> ...
Segundo nmero: <input type="text" name="n2" />
<p><input type="submit" value="mostrar resultado" name="boton"/>
</form>
<?php
}
?>
</body>
</html>
SOLUCIN EJERCICIO 02 FORMULARIOS RECURSIVOS
<Html>
<Title> Numeros.php </Title>
<Body>
<?PHP
if (isset($_REQUEST["boton"]))
{
$a=$_REQUEST["a"];
$b=$_REQUEST["b"];
echo "Nmeros 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 nmeros
<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
EJERCICIO CALIFICADO 05
function Nombre_Funcion (parametro1, parametro2, ... parmetro n)
{
Instrucciones;
<return valor>
}
EJERCICIO CALIFICADO 06
producto.php
producto.php
EJ. CALIFICADO 06 - SOLUCIN
Al cargarse la pgina, se visualiza el formulario para el ingreso de los dos valores, ya que
al no haber sido presionado el Botn, la condicin del if en el programa principal, es
falsa.
EJ. CALIFICADO 06 - SOLUCIN
par.php
par.php
EJERCICIO CALIFICADO 07
EJ. CALIFICADO 07 - SOLUCIN
EJ. CALIFICADO 07 - SOLUCIN
mayuscula.php
EJERCICIO CALIFICADO 08
mayuscula.php
EJ. CALIFICADO 08 - SOLUCIN
EJ. CALIFICADO 08 - SOLUCIN
cuadrado.php
EJERCICIO CALIFICADO 09
cuadrado.php
EJ. CALIFICADO 09 - SOLUCIN
EJ. CALIFICADO 09 - SOLUCIN