Diseño y Elaboración de Páginas Web

Diseño y elaboración de páginas web
Conalep 075 Grupo 607
Unidad de Aprendizaje: Desarrollo de páginas web estáticas Número: 1

Práctica: Cambio de apariencia de la página web empleando estilos en los
hipervínculos y en las listas de las páginas web. Número: 11
Propósito de la práctica: Cambiar el aspecto de los hipervínculos y de las
listas empleadas para mejorar la apariencia de las páginas web.
Codigo:
<html>
<head>
<title>Practica 11</title>
<style type="text/css">
.navbar{
padding:0;
margin:0;
float: left;
}
.navbar li{
list-style-type:none;
background-color:white;
margin:0.5em 0;
padding: 0.3em;
border-right:1em solid black;
text-decoration: none;
width:220px;
}
.container{
float: left;
font-family: century gothic;
color: blue;
Elena Jazmín Osorio Loza 607

}
a:link
{color: blue;
}
a:visited
{color:purple;
}
p {font-family:century gothic;}
body {
background:#FFE333;
background-attachment: fixed;
background-repeat: repeat-x;
background-size: 1000px;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href=""><p>Pagina principal<p></a></li>
<li><a href=""><p>Altas</p> </a></li>
<li><a href=""><p>Bajas </p></a></li>
<li><a href=""><p>Modificaciones</p> </a></li>
<li><a href=""><p>Consultas</p></a></li>
</ul>
</div>
<div class="container">

<font size=7>Uso de herramientas<br>apliaciones
web</font><br><br><br>
<p>En este ejemplo haremos uso de hojas de estilo en casacada!
</p>
<p >Daremos formato al texto y a los enlaces!</p>
<p>Esta Página no cuenta con imágenes, pero
contiene enlaces, aunque no te lleven a ningún sitio…</p>
<p >Debería haber más cosas aquí, pero
es suficiente para lo que necesitamos ejemplificar</p>
</div>
</body>
</html>
Captura de pantalla:
Conclusión:
En esta práctica aprendí como acomodar los div, me refiero a que por defecto
los div se acomodan de forma horizontal (hacia abajo) y en esta ocasión tenía
que ser de forma vertical (hacia los lados) además aprendi a moder margen en
un solo lado con el comando border-right.
Unidad de Aprendizaje: Desarrollo de páginas web estáticas Número: 1

Práctica: Definición de propiedades para el control del aspecto de las tablas
usando hojas de estilos en cascada. Número: 12

Propósito de la práctica: Mejorar el aspecto de las tablas diseñadas
mediante el uso de hojas de estilos en cascada para su desarrollo.
Codigo:
<html>
<head>
#header{
width: 100%;
height: 70px;
background-color:#B45F04;
border: 2px solid black;
-webkit-box-shadow: 9px 7px 29px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 7px 29px -4px rgba(0,0,0,0.75);
box-shadow: 9px 7px 29px -4px rgba(0,0,0,0.75);
font-family:century gothic; text-align: center;
float: left;
}
#izquierda{
width: 250px;
height: 200px;
background-color:#81F7F3;
border: 2px solid blue;
font-family:century gothic;
line-height:11px ;

float: left;
position: absolute;
top: 100px;
left: 20px;
}
#conteiner {
width: 450px;
height: 310px;
background-color:#FFFFFF;
color:#08088A;
line-height:2px ;
float: left;
position: absolute;
top: 100px;
left: 430px;
#derecha{
width: 250px;
height: 200px;
background-color:#F3F781;

text-align: justify;
float: left;
position: absolute;
top: 100px;
left: 1000px;
}
#footer{
width: 100%;
height: 55px;
background-color:#FFFFFF;
border: 2px solid black;
float: left;
</style>
<script type="text/javascript" src="/Practica14.js"></script>

</head>
<body>
<div id="header"><font size=7>Uso de herramientas para aplicaciones
web</font></div><br>
<div id="izquierda">
<ul>
<li><a href=""><p>Hipervinculo 01<p></a></li>
<li><a href=""><p>Hipervinculo 02</p> </a></li>
<li><a href=""><p>Hipervinculo 03</p></a></li>
<li><a href=""><p>Hipervinculo 04</p> </a></li>
<li><a href=""><p>Hipervinculo 05</p></a></li>
</ul>
</div>
<div id="conteiner">
<h1> Titulo Del
contenido</h1><br><br><br><br><br><br><br>
<h2> Subtitulo</h2><br><br><br><br><br><br>
<h3> Escribe algo para rellenar...</h3><br>
<h3> Escribe algo pararellenar...</h3><br>
</div><br>

<div id="derecha">
<font size=4>aqui pueden insertar imagenes, anuncios,
publicidad mas enlaces etc...</font>
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br>
<div id="footer"><br>
<font size=5>Pagina del sitio web</font><br>
</div>
<br><br>
</body>
</html>

Conclusión:
En esta práctica aprendí a utilizar los marcos cuyo id eran nombrados con
algún nombre como #header o #izquierda #derecha etc..
También aprendí a acomodarlos en la forma que me están pidiendo ya sea
izquierda o derecha con el comando float: left; el cual me ayudo para ponerlos
de forma vertical y en cuanto la posición y la separación utilice el comando y
position: absolute; top: 100px; left: 1000px;

Unidad de Aprendizaje: Desarrollo de páginas web dinámicas Número: 2
Práctica: Inclusión de código Javascript en XHTML Número: 13
Propósito de la práctica: Identificar las distintas formas de incrustar código
del lenguaje de programación Javascript en XHTML, para su desarrollo.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES"
"http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>El primer script</title>
<script type="text/javascript">
alert("Este es un mensaje de alerta !");
</script>
</head>
<body>
<p>Esta pagina contiene el primer script</p>
</body>
</html>
Conclusión: En esta práctica aprendí a mostrar un aviso con el comando de

javascript alert y dentro de este comando puse el mensaje que quería que se
mostrara en la ventanita de alerta.

Práctica: Uso de variables empleando javascript Número: 14
Propósito de la práctica: Emplear variables javascript por medio de su
código para almacenar y hacer referencias a valores.
Codigo en html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
</head>
<body>
<script src="practica14.js" type="text/javascript"> </script>
</body>
</html>
Cofigo en javascript:
alert("Hola Mundo Que facil es incluir 'comillas simples' y comillas dobles");
Conclusión: En esta práctica aprendí a mostrar un aviso con el comando de

javascript alert y dentro de este comando puse el mensaje que quería que se
mostrara en la ventanita de alerta además aprendí a poner comillas dentro de
un mensaje de alert en javascript y fue un poco difícil porque el mensaje de
java esta escrito entre comillas dobles.
Practica 15: Manejo de arreglos Javascript

Propósito de la Practica: Emplear arreglos con javascript para almacenar
múltiples valores.
Código html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="practica15x.js" type="text/javascript"> </script>
</head>
<body>
</body>
</html>
Codigo Javascript:
alert("Meses del a\u00F1o");
alert("Enero");
alert("Febrero");
alert("Marzo");
alert("Abril");
alert("Mayo");
alert("Junio");
alert("Julio");
alert("Agosto");
alert("Septiembre");
alert("Octubre");
alert("Noviembre");
alert("Diciembre");Captura de pantalla:
Conclusión:

En esta práctica emplee arreglos con javascript para almacenar múltiples
valores. Utilice alert para poner en una ventana el mensaje que quería
mostras, utilice varios para todos los meces del año y lo mande llamar en un
archivo de html.

Práctica: Almacena valores mediante declaración y uso de variables Número:
16
Propósito de la práctica: Almacenar valores con uso de variables mediante
lenguaje de desarrollo seleccionado para su muestra.
Código:
<html>
<head>
body{
background-color: #55C7D7;
font-family:century gothic; size:11%;
}
</style>
</head>
<body>
var salario_trabajador =prompt ("Ingresa el salario: ");
var impuestos=prompt ("Ingresa el impuesto: ");
document.write("El salario del trabajador sin impuestos es de: " +

salario_trabajador + " pesos");
document.write('<br>');
document.write("El impuesto es de: " + impuestos + "%");

document.write("El salario del trabajador con impuestos es de: " +
salario_trabajador*impuestos/100 + " pesos");
</script>
</body>
</html>
Captura:
Conclusión:
Utilze el método pront y almacenar y mostrar en pantallas las variables,
se almacenaron valores mediante declaración y uso de variables,
además de mostrar en pantalla una ventana donde pide que ingrese su
salario y los impuestos.
Unidad de Aprendizaje: Desarrollo de páginas web dinámicas

Número: 2

Práctica: Realiza operaciones con declaración y uso de variables
Número: 17
Propósito de la práctica: Realizar operaciones que hagan uso de
variables mediante lenguaje de desarrollo seleccionado para almacenar
y procesar información.
Codigo:
<html>
<head>
p {font-family:century gothic;}
body{
background-color: #55C7D7;
}
</style>
</head>
<body>
<p>
var n1 =prompt ("Ingresa el primer numero: ");
var n2 =prompt ("Ingresa el segundo numero: ");
var suma = parseInt(n1) + parseInt (n2);

document.write("El resultado de la suma es: " +suma);
var resta = parseInt(n1) - parseInt (n2);
document.write("El resultado de la resta es: " +resta);
var multiplicasion = parseInt(n1) * parseInt (n2);
document.write("El resultado de la multiplicasion es: "

+multiplicasion);
var division_sin_decimales = parseInt(n1) / parseInt (n2);
document.write("El resultado de la division sin decimales es:

" +division_sin_decimales);
var residuo_de_la_division = parseInt(n1) / parseInt(n2);
document.write("El resultado de la residuo de la division es:

" +residuo_de_la_division.toFixed(2));

</script>
</p>
</body>
</html>
Captura:

Conclusión:
En esta práctica se realizaron operaciones con declaración y uso de
variables, pidiendo al usuario que introdujera dos números mediante
una ventanita, para que los números introducidos por el usuario se
sumaran, restaran, multiplicaran y dividieran al mismo tiempo, pero
mostrando el respectivo resultado de las operaciones. Esto fue posible
utilizando dos comandos en especial que son la función parseInt analiza
una cadena y devuelve un numero entero y el método toFixed que
convierte un numero de cadena a un número con decimales, este
método fue utilizando dentro del comando document.write para que el
resultado se mostrara en la página web.

Número: 2
Práctica: Almacena valores múltiples usando de arreglos Número: 18
Propósito de la práctica: Emplear arreglos simples mediante lenguaje
de desarrollo seleccionado para almacenar valores múltiples.
Código:
<!DOCTYPE html>
<html>
<head>

table, th, td {
border: 4px white inset;
}
table th, #mm { background-color: yellow; }
}
h1 { font-family:century gothic; size:11% }
</style>
body{
background-color: #C599D6;
}
</style>
</head>
<body>
<h1>
var arreglo0 = ["Modelo", "Marca", "CC", "Motor", "Potencia"],
arreglo1 = ["Cougar", "Ford", "2.5", "V6", "172"],
arreglo2 = ["Chevy", "Chevrolet", "1.6", "V4", "160"];
document.write("<table><tr><td id=\"mm\">Matriz0</td>");
for(var i = 0, elemento; elemento = arreglo0[i]; i++) {
document.write("<td id=\"mm\">" + elemento + "</td>");
}
document.write("</tr><tr><td id=\"mm\">Matriz1</td>");
document.write("<td>" + elemento + "</td>");
}

document.write("</tr><tr><td id=\"mm\">Matriz2</td>");
document.write("<td>" + elemento + "</td>");
}
document.write("</tr></table>");
</script>
</h1>
</body>
</html>
Captura:
Conclusión:
En esta práctica se
logró almacenas
valores múltiples
usando arreglos.
Además, a mandar
llamar las variables y que aparecieran dentro de la tabla.
Número: 2
Práctica: Controla el flujo de la información usando sentencia
condicional if-else. Número:19
Propósito de la práctica: Hacer uso de la sentencia if-else mediante
lenguaje de desarrollo seleccionado para controlar el flujo de la
información.
Código:
<html>
<head>
h1 {
font-family:century gothic; size:11%

}
body{
background-color: #581845;
}
</style>
</head>
<body>
<h1>
var num1 =prompt ("Ingresa el primer numero: ");
var num2 =prompt ("Ingresa el segundo numero: ");
var num3 =prompt ("Ingresa el tercer numero: ");
document.write("Sentencia if");
document.write("Los tres numeros a comparar son: " +num1+ ","

+num2+ " y " +num3);

if(num1>num2&&num3){mayor=num1}
if (num2>num1&&num3) {mayor=num1}
if (num3>num1&&num2) {mayor=num3}
document.write("Y el mayor es el " +mayor);

</script>
</h1>
</body>
</html>
Captura:
Conclusión:
En esta práctica aprendí a utilizar la sentencia if, en este caso esta
sentencia se utilizó para mostrar un número que sea mayor de los otros
dos. Es decir, el usuario tiene que introducir tres números y estos son
utilizados para que se muestren en pantalla y posteriormente mostrar el
número mayor.

Unidad de Aprendizaje: Desarrollo de páginas web dinámicas.
Número: 2 Práctica: Calcula la factorial de un número usando
sentencia for.Número: 20
Propósito de la práctica: Hacer uso de la sentencia for mediante
lenguaje de desarrollo seleccionado para calcular la factorial de un
número.
Código:
<html>
<head>
h1 {
font-family:century gothic; size:11%
}
body{
background-color: #DDA6B6 ;
}
</style>
</head>
<body>
<h1>
var num =prompt ("Ingresa un numero para calcular el factorial:
");
document.write("Sentencia for");
var total=num;
document.write(num);

for (num=num-1;num>0;num--) {
document.write(" x " +num);
total=total*num;
}
document.write("Factorial= "+total);
</script>
</h1>
</body>
</html>
Captura:
Conclusión:
En esta práctica logre calcular la factorial de un número usando
sentencia for. Aprendí un poco más sobre la sentencia for ya que el
maestro en clase nos explicó a detalle cómo hacer las operaciones.

Número: 2 Práctica: Calcula la descomposición factorial usando
sentencia while Número: 21
Propósito de la práctica: Hacer uso de la sentencia while mediante
lenguaje de desarrollo seleccionado para calcular la descomposición
factorial.
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
h1,h3,h4 {
}
body{
background-color: #DDA6B6 ;
}
</style>
</head>
<body>
var num1, t, i;
var num1 =parseInt(prompt("Ingresa un numero:",''));

document.write("<h1>Sentencia <i>while</i></h1>");
document.write("<h3>Descomposicion factorial</h3>");
document.write("<h4><b>" + num1 + "</b> = ");
i=2;
t=0;
while(num1%i != 0)
{
i++;
}
document.write(i);
num1=num1/i;
while(num1 !=1)
{
document.write(" x " + i );
num1= num1/i;
if(num1 !=1 )
{
while(num1%i > 0)
{
i++;
}
}
}

document.write("</h4>");
</script>
</body>
</html>
Captura:
Conclusión:
En esta práctica aprendí como usar la sentencia while en javascript para
que se busque una factorial y se descomponga.
Practica 22: Calcula raíces con el empleo de funciones.

Propósito: Hacer uso de funciones mediante el lenguaje de desarrollo
seleccionado para calcular la raíz cuadrada y cubica de un numero dado.

Indicaciones: Elabora un programa para calcular la raíz cuadrada y
cubica de un numero dado, utilizando dos funciones, una para la raíz
cuadrada y otra para la raíz cubica, imprimiendo los valores de ambas
raíces en pantalla, utilizando la sentencia Math.Pow.
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
body{
background-color: #85D3C5;
}
</style>
</head>
<body>
var num1;
num1 = parseInt(prompt("Ingrese el numero:",''));
function raiz(num)
{
return Math.pow(num, 1/2);
}
function raizcub(num)
{
return Math.pow(num, 1/3);
}

document.write("<h2>Numero dado: " + num1 + "</h2>");
document.write("<h2>Raiz cuadrada de " + num1 + " = " + raiz(num1)
+
"<br />");
document.write("<h2>Raiz cubica de " + num1 + " = " + raizcub(num1)
+
"</h2>");
</script>+
</body>
</html>
Captura:
Conclusión:
En esta práctica utilice métodos nuevos los cuales fueron Math.pow que
devuelve el valor de una expresión formada por una base elevada a una
potencia especificada, function raíz y function raizcub que son funciones
para realizar las raíces cuadradas y cubicas.

Practica 23: Guarda accesos a aplicaciones con el empleo de cookies.
Propósito de la práctica: Hacer uso de cookies mediante la
configuración propia para guardar los accesos a las aplicaciones.
Indicaciones: Elaborar un programa que permita mostrar un contador
de accesos utilizando cookies y además permita eliminar las cookies
generadas.
Código html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-
8859-1"/>
<script src="codigo.js" type="text/javascript"></script>
p, h1{
text-align: center; }
</style>
</head>
<body>
<h1>Contador de accesos</h1>
<div id="div1">
var contador=getCookie("contador");
++contador;
setCookie("contador",contador);
if (contador == 1 ) {
document.write("<p>Es la primera vez que accedes a esta
pagina.</p>");
}

else if(contador > 1)
{
document.write("<p>Ha accedido a esta pagina <b>" + contador +
"</b> veces.</p>"); }
</script>
</div>
<div style="text-align:center"><a href="Practica
23.html">Actualizar</a>
<span> </span>
<a href="#" onClick="setCookie('contador', 0);
borrar();">Eliminar</a></div>
<noscript><p><b>
Su navegador debe tener habilitado JavaScript para poder mostrar esta
pagina correctamente
</b></p></noscript>
</body>
</html>
Código javascript:
function setCookie(nombre,valor,dias) {
if (dias) {
var fecha = new Date();
fecha.setTime(fecha.getTime()+(dias*24*60*60*1000));
var expires = "; expires="+fecha.toGMTString();
}
else var expires = "";
document.cookie = nombre+"="+valor+expires+"; path=/";

}
function getCookie(nombre) {
var nombreAux = nombre+ "=";
var aCookies = document.cookie.split(';');
for (var i=0;i < aCookies.length;i++) {
var c = aCookies [i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nombreAux) == 0) return
c.substring(nombreAux.length,c.length);
}
return null;
}
function delCookie(nombre) {
if (getCookie(nombre)) {
document.cookie = nombre+ "=" + "; expires=Thu, 01-Jan-7000:00:01
GMT";
}
}
function borrar() {
document.getElementById('div1').innerHTML='<b><p>Contador
deaccesos borrado</p></b>';
return false;
}

Captura:
Conclusión:
En esta práctica se hizo uso de las cookies para que muestre un
contador de visitas y también que se puedan borrar las cookies
generadas.

Práctica 24: Conexión de las aplicaciones con el motor de base de
datos mediante sql.
Propósito de la practica: Elabora un script mediante sentencias eql,
que permitan realizar la conexión con la base de datos.
Indicaciones: Elabora un programa que permita hacer conexión a la
base de datos “agenda” especificando la base de datos a utilizar,
nombre de usuario y contraseña de acceso.
Ejecuta las sentencias sql o emplea las herramientas de sistema gestos
para crear una base de datos denominada “agenda”. Utilice la sentencia
echo.

Práctica 25: Consulta de registros de la base de datos empleando un
criterio de selección, propósito de realizar consultas a la base de datos
empleando un criterio de selección para presentar información en las
páginas web.
Indicaciones: Ingresa al sistema gestor de bases de datos selecciona la
base de datos agenda realiza una consulta de selección en la que
muestre todos los registros de la tabla agenda, realiza una consulta de
selección en la que muestre todos los registros de la tabla agenda.

Practica 26 para recuperación: Diseño de formularios para agregar
registros.
Propósito: Agregar registros en la base de datos con desarrollo de
formularios para su actualización.
Indicaciones: Desarrolla un formulario dinámico que permita dar de
alta contactos en la tabla tbl agenda con la base de datos agenda y el
formulario debe completar los siguientes datos. La tabla agenda debe
contener Nombre, Correo electrónico y teléfono.1,2,3,4,5

Diseño y Elaboración de Páginas Web - Prácticas.

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño y Elaboración de Páginas Web - Prácticas.

Cargado por

Copyright:

Formatos disponibles

Conalep 075 Grupo 607

Unidad de Aprendizaje: Desarrollo de páginas web estáticas Número: 1

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Unidad de Aprendizaje: Desarrollo de páginas web estáticas Número: 1

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

<script type="text/javascript" src="/Practica14.js"></script>

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Conclusión: En esta práctica aprendí a mostrar un aviso con el comando de

Elena Jazmín Osorio Loza 607

Conclusión: En esta práctica aprendí a mostrar un aviso con el comando de

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

var impuestos=prompt ("Ingresa el impuesto: ");

document.write("El salario del trabajador sin impuestos es de: " +

document.write("El impuesto es de: " + impuestos + "%");

Elena Jazmín Osorio Loza 607

Unidad de Aprendizaje: Desarrollo de páginas web dinámicas

Elena Jazmín Osorio Loza 607

var n1 =prompt ("Ingresa el primer numero: ");

var n2 =prompt ("Ingresa el segundo numero: ");

var suma = parseInt(n1) + parseInt (n2);

Elena Jazmín Osorio Loza 607

var resta = parseInt(n1) - parseInt (n2);

document.write("El resultado de la resta es: " +resta);

var multiplicasion = parseInt(n1) * parseInt (n2);

document.write("El resultado de la multiplicasion es: "

var division_sin_decimales = parseInt(n1) / parseInt (n2);

document.write("El resultado de la division sin decimales es:

var residuo_de_la_division = parseInt(n1) / parseInt(n2);

document.write("El resultado de la residuo de la division es:

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Unidad de Aprendizaje: Desarrollo de páginas web dinámicas

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

var num2 =prompt ("Ingresa el segundo numero: ");

var num3 =prompt ("Ingresa el tercer numero: ");

document.write("Los tres numeros a comparar son: " +num1+ ","

Elena Jazmín Osorio Loza 607

document.write("Y el mayor es el " +mayor);

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

document.write("<h4><b>" + num1 + "</b> = ");

Elena Jazmín Osorio Loza 607

Practica 22: Calcula raíces con el empleo de funciones.

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607

Elena Jazmín Osorio Loza 607