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

COLEGIO DE EDUCACION PROFESIONAL TECNICA DEL

ESTADO DE VERACRUZ.

CONALEP 165

"LIC. JESUS REYES HEROLES"

ALUMNO: JOSE ANTONIO DEL ANGEL MATEOS

604-INFO

DOCENTE: LIC. GISELA GUTIERREZ LUGO

MODULO: DISEÑO Y ELABORACION DE PAGINAS WEB (DEWE)

REPORTE DE PRÁCTICA 1

Nombre de la práctica: Inserción de texto y estructuración en párrafos con código XHTML.

Propósito de la práctica: Insertar texto en las páginas web y emplear párrafos con código XHTML, con la finalidad de presentar información ordenada y estructurada para que sea fácil de comprender por el usuario.

1.- Abrí la aplicación en la cual se va a programar la pagina web puede ser bloc de notas, Word, etc.

2.- Después introduje el siguiente código en el bloc de notas:

<html>con esta etiqueta se empieza a escribir el código.

<head><title>Ejemplo de etiqueta p</title></head> encabezado de la pagina

<body>a partir de esta pagina se introduce el cuerpo de la pagina

<p>Este es el texto que forma el primer párrafo de la página. Los párrafos

pueden ocupar varias líneas y el navegador se encarga de ajustar su

longitud al tamaño de la ventana</p>esta etiqueta sirve para el salto de línea de los párrafos.

<p>El segundo párrafo de la página también se define encerrado su texto con

la etiqueta p. El navegador también se encarga de separar

automáticamente cada párrafo</p>

</body>para cerrar la etiqueta se escribe una diagonal antes de la etiqueta

</html>

3.- Cuando termine de introducir el código, guardé el archivo con la extensión .html después de escribir el nombre del documento.

4.- Por último abrí el archivo, el cual se abre con algún explorador de internet como Internet Explorer, Google Chrome, Mozilla Firefox.

Y queda de la siguiente manera:

Conclusión:

Para que el archivo se pueda abrir en algún explorador web se debe de guardar con la extensión HTML, se debe de hacer el uso de etiquetas para realizar alguna acción en la página, como por ejemplo la etiqueta ‘body’ en ella se debe de escribir el texto, para cerrar una etiqueta se utiliza la diagonal antes del nombre de la etiqueta.

REPORTE DE PRACTICA 2

Nombre de la practica:Manejo de secciones con código XHTML.

Propósito de la practica:Estructura las páginas empleando secciones con código XHTML, para ayudar a la fácil lectura de la información.

1.- Abrí la aplicación en la cual se va a programar la pagina web puede ser bloc de notas, Word, etc.

2.- Después introduje el siguiente código en el bloc de notas:

<html>

<head><title>Ejemplo de etiqueta p</title></head>

<body>

<b>Titular de la pagina</b> esta etiqueta se utiliza para que el texto en ‘negrita’

<p>Párrafo de introducción...</p>

<b>La primera sub-seccin</b>

<p>Párrafo de contenido...</p>

<b>Otra subseccion</b>

<p>Más párrafos de contenido...</p>

</body>

</html>

3.- Guardé el archivo con la extensión .html, y abrí la el archivo, quedando de la siguiente manera:

Conclusión:

La etiqueta <b> se utiliza para que un texto se ponga en negrita, para poner un encabezado se utiliza la etiqueta <head><title>, la etiqueta <p> es para hacer el salto de página.

REPORTE DE PRACTICA 3

Nombre de la practica:Marcado de texto, con código XHTML.

Propósito de la practica:Realizar el marcado de los elementos que conforman el texto con código XHTML, para presentar elementos que requieran denotar énfasis.

1.- Abrí la aplicación en la cual se va a programar la pagina web puede ser bloc de notas, Word, etc.

2.- Después introduje el siguiente código en el bloc de notas e introduje el texto que va dentro de la etiqueta <body>:

<HTML>

<HEAD>

<TITLE>El ingenioso Hidalgo Don Quijote de la Mancha,

Capitulo VIII

</TITLE>

</HEAD>

<BODY>

<p><h3>Del buen suceso que el valeroso don Quijote

tuvo en la espantable y jamas imaginada aventura

de los molinos de viento, con otros sucesos dignos de felice

recordacion</h3></p>

de <b>Miguel de Cervantes Saavedra</b><br>

<p>En esto, descubrieron treinta o cuarenta molinos de

viento que hay en aquel campo; y, asi como don Quijote

los vio, dijo a su escudero:</p>

<p>-La ventura va guiando nuestras cosas mejor de lo que

acertaramos a desear, porque ves alli, amigo Sancho Panza,

donde se descubren treinta, o poco mas, desaforados gigantes,

con quien pienso hacer batalla y quitarles a todos las vidas,

con cuyos despojos comenzaremos a enriquecer; que esta es buena

guerra, <b>y es gran servicio de Dios quitar tan mala simiente

de sobre la faz de la tierra.</b></p>

<p><b>¿Que gigantes?</b> -dijo Sancho Panza.</p>

<p>-Aquellos que alli ves -<i>respondio su amo-</i> de los brazos

largos, que los suelen tener alguos de casi dos leguas.</p>

<p>-Mire vuestra nerced -<i>respondio Sancho</i>- que aquellos que

alli parecen <b>no son guigantes</b>, sino molinos de viento, y

lo que en ellos parecen brazos son las aspas, que, volteadas del

viento, hacen andar la piedra del molino.</p>

<p>-Bien parece -respondio don Quijote- que no estas cursando en esto

de las aventuras: ellos son gigantes; y si tienes miedo, quitate

de ahi, y ponte en oracion en el espacio que yo voy a entrar con

ellos en fiera y desigual batalla.</p>

</BODY>

</HTML>

3.-Guardè el archivo con la extensión .html después de agregar el nombre del archivo.

4.- Posteriormente abri el archivo con el explorador de internet predeterminado, quedando de la siguiente manera:

Conclusión:

La etiqueta <h3> se utiliza para que los títulos o subtítulos de la pagina web se vean mas grande y se puedan distinguir mas que el otro texto.

REPORTE DE PRACTICA 4

Nombre de la práctica: Creación de hipervínculos con código XHTML.

Propósito de la practica: Establecer relaciones entre 2 o más recursos con código XHTML, para demostrar el uso de hipervínculos

En la práctica numero 4 se deben de crear enlaces hacia imágenes, y otras páginas, la página inicial lleva el siguiente código:

Pagina 1…

<HTML>

<HEAD>

<TITLE>Mi Sitio</TITLE>

</HEAD>

<BODY>

<h1>Mi Sitio</h1>

<p>Lorem ipsum dolor sit amset, consectetuer adipiscing elit.

Donec iaculis posuere justo. Nam vel neque. Proin sagittis mauris

sit amet nisl. Sed ipsum. Alquiam vitae justo.</p>

<h2>Ultimos proyectos</h2>

<p>Etiam consectuer, mauris vitae cursus seleruisque, dui turpis

dignissun justo, et euismed enim odio sit amet erat. Aliquam dum

ligula, portitor, eu facilisis vitae, ornare sed, tortor.</p>

<a href="portafolio/indice.html">Acceder a los últimos proyectos de

Mi Sitio</a>

</BODY>

</HTML>

Así es como queda

En donde la etiqueta < a href> realiza la función de crear un enlace a otra pagina en el cual se le indica en que carpetas se encuentra junto con la extensión .html al cerrar la etiqueta se pone el nombre que llevara el enlace, al terminar de utilizar la etiqueta se cierra con <a>, ese enlace se encuentra remarcado en otro color, el cual nos llevara a la siguiente pagina…

Pagina 2…

<HTML>

<HEAD>

<TITLE>Indice</TITLE>

</HEAD>

<BODY>

<a href="../indice.html">Volver a la pagina principal</a>

<h1>Ultimos proyectos</h1>

<p>Lorem ipsum dolor sit amet, conectutuer, adisciping elit.

Donect laculis posnere justo. Nam nel neque.</p>

<h2>Proyecto 1</h2>

<p>Etiam consectuteru, amarutis vitae cursus scelerisque, dui harpis

digsumisim justo, et eusimod enimd odio sit amet erat.</p>

<a href="imagenes/proyecto1.jpg">Ver imagen del Proyecto 1</a>

<h2>Proyecto 2</h2>

<p>Etiam consectuteru, amarutis vitae cursus scelerisque, dui harpis

digsumisim justo, et eusimod enimd odio sit amet erat.</p>

<a href="imagenes/proyecto2.jpg">Ver imagen del Proyecto 2</a>

</BODY>

Esta pagina debe estar enlazada con la primera para que pueda regresar, también tiene dos enlaces para 2 imágenes, es el mismo procedimiento para crear un link solo que se le cambia la extensión a .jpg o otras extensiones de imágenes, las imágenes deben de estar guardas en el mismo lugar que la pagina o si no escribe la dirección, el nombre de la carpeta en donde se encuentran, así es como queda:

Conclusión:

La etiqueta <href> sirve para crear un enlace a otra página o imágenes, siempre y cuando se escriba la extensión de la página o de la imagen. Además de escribir la ubicación del archivo para enlazar.

REPORTE DE PRACTICA 5

Nombre de la práctica: Agrupamiento de elementos mediante listas.

Propósito de la práctica: Agrupar elementos empleando listas para presentar información ordenada.

En esta práctica se trata de realizar diferentes tipos de listas, con algunos enlaces, a continuación se muestra el código y como se muestra en la página:

<html>

<head>

</head>

<title>

Lista compleja anidada

</title>

<body>

<ul>

<li>Inicio

<li><b>Noticias</b></li>

<ul>

<li><a href="recientes.html">Recientes</a></li>

<li><b><a href="mas leidas.html">Mas leidas</a></b></li>

<li><a href="mas valoradas.html">Mas valoradas</a></li>

</ul>

<li>Articulos

<ol>

<li><B>XHTML</B></li>

<li>JavaScript</li>

<li>Otros</li>

</ol>

<li>Contacto<p>

<dl>

<dt><I>Email</I</dt>

<dd><b>nombre@direccion.com</b></dd>

<dt><I>Telefono</I></dt>

</dl>

</body>

</html>

La etiqueta <li> se utiliza para poder enlistar algunos elementos en la página web, y la etiqueta <u> se utiliza para anidar las listas, una lista dentro de otra, la etiqueta <dd> se la aplica como una sangría a la línea, la etiqueta<I> se utiliza para que el texto este en cursiva,<ol> se utiliza para numerar la lista, con <dt> también agrega una lista pero sin algún tipo de viñeta, como la numeración.

Conclusión:

Para agregar una lista a la página se utilizan etiquetas, de las cuales existen varias entre ellas <ol>, <ul>, <dl> que dan el diferente estilo de viñeta, y para indicar que oraciones van en la lista de se utiliza la etiqueta <li>, y <I> para que el texto este en cursiva.

REPORTE DE PRÁCTICA 6

Nombre de la práctica: Inserción de imágenes empleando etiquetas de imágenes

Propósito de la práctica: Insertar imágenes directas en las páginas web empleando etiquetas de imágenes, que mejoren el aspecto y presentación de la información en las páginas web.

Código de la página:

<HTML>

<HEAD>

<TITLE>Mi Sitio</TITLE>

</HEAD>

<BODY>

<a href="practica5.html">volver a la pagina principal</a>

<h1>Mi Sitio</h1>

<p>Lorem ipsum dolor sit amset, consectetuer adipiscing elit.

Donec iaculis posuere justo. Nam vel neque. Proin sagittis mauris

sit amet nisl. Sed ipsum. Alquiam vitae justo.</p>

<h2>Ultimos proyectos</h2>

<p>Etiam consectuer, mauris vitae cursus seleruisque, dui turpis

dignissun justo, et euismed enim odio sit am et erat. Aliquam dum

ligula, portitor, eu facilisis vitae, ornare sed, tortor.</p>

<img src="imagenes/proyecto1.jpg"> inserta una imagen en la pagina web, aquí se muestra la ubicación, el nombre y el formato de la imagen, la etiqueta no necesita cierre.

</BODY>

</HTML>

Conclusión:

Para subir una imagen a una pagina web, es necesario insertar la etiqueta <img src>, si la imagen que necesitamos subir está en el mismo lugar que esta guardada la pagina, no es necesario escribir la dirección en el código, si no, se escribe el nombre de la carpeta antes del nombre de la imagen separado de una diagonal, después de escribir la dirección de la imagen y su nombre se escribe su formato, esta etiqueta no necesita cierre.

REPORTE DE PRÁCTICA 7

Nombre de la práctica: Manejo de tablas con código HTML

Propósito de la práctica: Emplear tablas con código HTML, para estructurar en filas y columnas la información de las páginas web.

Este es el código de la página web…

<html>

<head>

<body>

<b><h1>Su pedido</h1></b>

<table> esta etiqueta crea una tabla.

<tr><td align ="center"><b>Nombre del producto</b></td>

<td><b>Precio unitario</b></td>

<td><b>Unidades</b></td>

<td><b>subtotal</b></td>

</tr>

<tr><td>Rreproductor MP3 (80 GB)</td>

</tr>

<tr>

<tr><td>Fundas de colores</td>

</tr>

<tr>

<tr><td>Reproductor de radio & control remoto</td>

</tr>

<tr>

<tr><td align="center"><b>TOTAL</b></td>

</tr>

</table>

</body>

</html>

La etiqueta <tr> sirve para abrir una fila en la tabla seguido del <td> para que se cambie a otra celda

La etiqueta ‘align’ sirve para alinear el texto .

Así queda la pagina…

Conclusión:

La etiqueta align es utilizada para alinear el texto, como pueden ser centrados, hacia a la izquierda, o a la derecha (center, left, right), para crear una tabla se utiliza <table> junto con las etiquetas <tr> y <td>. Estas etiquetas si requieren de cierre, </table>, </tr>, </td>, el align va dentro de la etiqueta <td> por ejemplo: <td align=”center”> y seguido del texto.

sábado, 23 de marzo de 2013