Diseño y Elaboracion de Paginas Web (Reportes): mayo 2013

Cambio de apariencia de la página web empleando estilos en los hipervínculos y en las listas de las páginas web.

Reporte de practica 11

Nombre del alumno: José Antonio Del Ángel Mateos

Grupo: 604-INFO.

Docente: Lic. Gisela Gutiérrez Lugo.

Nombre de la practica: Establecer apariencia del texto y de la letra en las páginas web con código HTML

Propósito: Definir propiedades con código HTML, que permitan establecer la apariencia del texto y de la letra utilizada

En la práctica 11 se tiene que elaborar una página en la cual se hace el uso de hojas de estilo la página contiene el siguiente código:

<html>

<head>

</head>

<title>

Uso de

</title>

.navbar{

list-style-type: none;

padding:0;

margin:0;

FLOAT="left";

margin-right:20px;

margin-bottom:900px; }

LI{

background: white;

margin: 0.5em 0;

padding: 0.3em;

border-right: 1em solid black;

text-decoration: none;

a:link { color: blue; }

a:visited {color: purple; }

</style>

<BODY>

<li><a href="paginaprincipal.html">Pagina principal</a></li>

<li><a href="altas.html">Altas</a></li>

<li><a href="bajas.html">Bajas</a></li>

<li><a href="modificaciones.html">Modificaciones</a></li>

<li><a href="Consultas.html">Consultas</a></li>

</ul>

<p><h1>Uso de herramientas aplicaciones web</h1></p>

<p>¡En este ejemplo haremos uso de hojas de estilo en cascada!</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>

body { color: blue }

body { background-color: #F3F781 }

body { font-family: Georgia, “Times New Roman”, Times, serif }

h1 { Font-family:Helvetica, Geneva, Arial,SunSans-Regular, sans-serif }

</style>

</body>

</html>

Primero se abre la etiqueta html para poder empezar a trabajar en ella. Despues se declara style type=”text/css” que nos permitirá realizar la hoja de estilo.

list-style-type: none; Nos indica que vamos a abrir una lista en la pagina; a continuación sus propiedades con estilo:

FLOAT="left"; nos permite que el flotador (la lista) es te un determinado lugar en este caso izquierda.

margin-right:20px; aquí se asigna el valor en pixeles del margen derecho.

background: white; aquí indica que el fondo de la lista será blanco

border-right: 1em solid black; indica que el borde derecho de la lista será negro

Así queda la pagina:

Conclusión:

Se necesita delcara <style-css:”text/css” para poder iniciar el estilo de la pagina, despues se le asignan las diferentes propiedades que se requieran declarar para la pagina.

Establecer apariencia del texto y de la letra en las páginas web con código HTML.

Reporte de practica 10

Nombre del alumno: José Antonio Del Ángel Mateos

Grupo: 604-INFO.

Docente: Lic. Gisela Gutiérrez Lugo.

Nombre de la practica: Establecer apariencia del texto y de la letra en las páginas web con código HTML.

Propósito: Definir propiedades con código HTML, que permitan establecer la apariencia del texto y de la letra utilizada.

En la práctica 10 se tiene que elaborar una página en la cual se hace el uso de hojas de estilo la página contiene el siguiente código:

<html>

<head>

</head>

<title>

Uso de

</title>

<body>

<ul>

<li><a href="paginaprincipal.html">Pagina principal</a>

<li><a href="altas.html">Altas</a>

<li><a href="bajas.html">Bajas</a>

<li><a href="modificaciones.html">Modificaciones</a>

<li><a href="Consultas.html">Consultas</a>

</ul>

<p><h1>Uso de herramientas aplicaciones web</h1></p>

<p>¡En este ejemplo haremos uso de hojas de estilo en cascada!</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>

<style type="text/css">

body { color: blue }

body { background-color: #F3F781 }

body { font-family: Georgia,"times new roman, arial}

<style type="text/css">

h1 { Font-family:Helvetica, Geneva, Arial,SunSans-Regular, sans-serif }

</style>

</style>

</body>

</body>

</body>

</html>

Primero se hace una lista, se define de que tipo va a ser la lista y luego los enlaces que llevará con la etiqueta “a href”. Después se inserta un titulo con la etiqueta “h1”, por último se agrega el texto que llevará la página.

Ahora insertaremos los estilos, se define de qué tipo de estilo utilizaremos que será igual a “text/css”, aplicaremos estilo a través del selector “body”:

body { color: blue } aqui indica el color de la letra de la pagina.

body { background-color: #F3F781 } en esta etiqueta el color del fondo de la pagina.

body { font-family: Georgia,"times new roman, arial} Aqui se establece el tipo de

letra de la pagina.

<style type="text/css"> Se abre otra etiqueta para aplicar el estilo al encabezado.

h1 { Font-family:Helvetica, Geneva, Arial,SunSans-Regular, sans-serif }.

Asi es como queda la pagina ya terminada:

Conclusión:

Para poder aplicar el estilo a toda la hoja se utiliza el selector –body-, el cual se manda a llamar al insertar color al fondo de la pagina, también para el tipo de letra y color del mismo, al igual que el estilo del encabezado, estas etiquetas si necesitan cierre.

Creacion de formularios con codigo html

Reporte de practica 8

CONALEP

“Lic. Jesús Reyes Heroles”

Nombre del alumno: José Antonio Del Ángel Mateos

Semestre: sexto

Grupo: 604

Carrera: Informática.

Modulo: Diseño De páginas Web.

Docente: Lic. Gisela Gutiérrez Lugo.

Práctica: Creación de formularios con código HTML

Proposito de la practica: Emplea formularios con código HTML, para que los usuarios interactúen con las aplicaciones web.

La practica 8 trata de realizar un formulario en este caso el curriculum vitae en la pagina web, para ello se necesita insertar el siguiente código:

<html>

<head>

</head>

<title>

Curriculum vitae

</title>

<body>

<p><b><big>Introducir Currilucum Vitae</b></big></p><br>

Nombre<br>

Apellidos<br>

Contraseña<br>

CURP<br>

<input type="radio"sexo value=Masculino>Hombre<br>

<input type="radio"sexo value=Femenino>Mujer<br>

<p><td>Subir fotografia</td>

<p><input type="checkbox">Suscribirme al boletin de novedades<br></p>

</body>

</html>

La etiqueta BIG se utiliza para hacer más grande el texto y necesita de cierre. La etiqueta INPUT se utiliza para escribir texto, para seleccionar, incluso hacer un botón, para realizar los distintos tipos de seleccionar las opciones se utiliza la etiqueta TYPE que va seguido de la etiqueta input, en esta etiqueta se escribe de que tipo de opción va a ser, si va a ser un cuadro de llenado se escribe “text” con su respectivo tamaño que es la etiqueta SIZE, para hacer una selección de múltiples opciones se utiliza del tipo radio con su tamaño, el tipo de opción “checkbox” se utiliza para seleccionar una solo una. Para poder enviar algún dato se utiliza el tipo de selección “submit” (el cual es un botón) con la etiqueta “value” que se utiliza para poner el nombre del botón, estas etiquetas se utilizan tal y como se muestran en el código.

La pagina se muestra como en la siguiente imagen:

Conclusión:

Existen varios tipos de selección que se pueden utilizar en la pagina para poder llenar el curriculum, como los puntos de selección, los cuadros de selección y escribir texto asi como también enviarlos, alos cuales se les puede dar un tamaño.

jueves, 9 de mayo de 2013

Cambio de apariencia de la página web empleando estilos en los hipervínculos y en las listas de las páginas web.

Establecer apariencia del texto y de la letra en las páginas web con código HTML.

Creacion de formularios con codigo html