Documentación de Las Prácticas 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;
}
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.

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.

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.
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.
Unidad de Aprendizaje: Desarrollo de páginas web dinámicas 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

Documentación de Las Prácticas Diseño y Elaboración de Páginas Web

Cargado por

Información del documento

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

Documentación de Las Prácticas Diseño y Elaboración de Páginas Web

Cargado por

Copyright:

Formatos disponibles

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

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

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

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

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

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

Unidad de Aprendizaje: Desarrollo de páginas web dinámicas Número: 2

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

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

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

Unidad de Aprendizaje: Desarrollo de páginas web dinámicas Número: 2

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

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

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

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

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

else if(contador > 1)

También podría gustarte