Date post: | 26-Dec-2015 |
Category: |
Documents |
Upload: | raul-flores-salinas |
View: | 43 times |
Download: | 1 times |
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:
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:
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
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
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
<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>
SOLUCIÓN EJERCICIO 02 – FORMULARIOS RECURSIVOS
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>
SOLUCIÓN EJERCICIO 02 – FORMULARIOS RECURSIVOS
<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:  <INPUT TYPE="TEXT" NAME="a" SIZE="10">
<Br>
Valor 2:  <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, ... 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.
… EJ. CALIFICADO 06 - SOLUCIÓN