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

jueves, 21 de marzo de 2013

Práctica 7

Colegio Nacional de Educación Profesional Técnica

Lic. "Jesus Reyes Heroles"

Nombre del Alumno: José Guadalupe Martínez Cruz

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

Grupo: INFO-604.

Práctica: N° 1.

Introducción

En esta práctica se emplean las etiquetas de tablas para crear una estructura de información con filas y columnas, el documento creado muestra en orden el conteo de un pedido.

Código HTML

El código fuente resultante es el siguiente:

<html>
<head>
                               <title>Práctica 7 </title>
</head>
<body>
                <h1>Su pedido</h1>
                <table>
                               <tr>
                                               <td align="center"><b>Nombre producto</td>
                                               <td><b>Precio unitario</b></td>
                                               <td><b>Unidades</b></td>
                                               <td><b>Subtotal</b></td>
                               </tr>
                               <tr>
                                               <td>Reproductor MP3 (80 GB)</td>
                                               <td>192.02</td>
                                               <td>1</td>
                                               <td>192.02</td>
                               </tr>
                               <tr>
                                               <td>Fundas de colores</td>
                                               <td>2.50</td>
                                               <td>5</td>
                                               <td>12.50</td>
                               </tr>
                               <tr>
                                               <td>Reproductor de radio & control remoto</td>
                                               <td>12.99</td>
                                               <td>1</td>
                                               <td>12.99</td>
                               </tr>
                               <tr>
                                               <td align="center"><b>TOTAL</b></td>
                                               <td><b>-</b></td>
                                               <td><b>7</b></td>
                                               <td><b>207.51</b></td></b>
                               </tr>
                </table>
</body>

Explicación del código generado

En está practica se ocuparon las etiquetas para crear una tabla y ordenar un pedido por nombre del producto, precio unitario, unidades y subtotal; y a l fina de la tabla se muestra el total.
Para declarar una tabla se ocupa la etiqueta “<table>” con su etiqueta de cierre “</table>” ; para las columnas se utilizan las etiquetas “<tr> & </tr>”; y por ultimo, para las filas se ocupan las etiquetas “<td> & </td>”, esta va dentro de la etiqueta anterior y se ocupa tantas veces se desea de filas en la tabla.

El resultado de loa práctica es el siguiente:

Conclusión

Las tablas sirven para dar un orden a una información mediante filas y columnas, en html una tabla por default se no tiene ningún formato (borde, alineación, etc), el cual se puede dar a toda la tabla o solamente a una columna o fila.

URL de la practica

http://dewe.mypost.skn2.com/practicas/practica7.html

Práctica 6

Colegio Nacional de Educación Profesional Técnica

Lic. "Jesus Reyes Heroles"

Nombre del Alumno: José Guadalupe Martínez Cruz

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

Grupo: INFO-604.

Práctica: N° 6.

Introducción

En está practica se edita el archivo índice.html de la carpeta portfolio ocupado en la practica 4 para colocarle las imágenes del proyecto en el mismo archivo, es decir, después del texto del proyecto se coloca su imagen y se elimina el vinculo.

Código HTML

El código fuente resultante es el siguiente:

<html>
                <head>
                               <title>Practica 6</title>
                </head>

                <body>
                               <a href="../indice.html">Volver a la pagina principal</a>
                               <h1>Ultimos proyectos</h1>
                               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                               Donec iaculis posuere justo. Nam vel neque.</p>
                               <h3>Proyecto 1</h3>
                               <p>Etiam consectetuer, mauris vitae cursus scelerisque,
                               dui turpis dignissim justo, et euismod enim odio sit amet erat.
                               </p><img src="./p4/imagenes/proyecto1.png" /><br />
                               <h3>Proyecto 2</h3>
                               <p>Etiam consectetuer, mauris vitae cursus scelerisque,
                               dui turpis dignissim justo, et euismod enim odio sit amet erat.
                               </p><img src="./p4/imagenes/proyecto2.jpg" /><br />
                </body>
</html>

Explicación del código generado

Es el mismo código del archivo índice.html colocado en la carpeta portfolio, el cual se utilizó en la Práctica N° 4; pero se eliminaron los hipervínculos en el:
<a href="./proyecto1.html">Ver imagen del Proyecto 1</a>
<a href="./proyecto2.html">Ver imagen del Proyecto 2</a>
Remplazándolos por imágenes de la siguiente manera con la etiqueta “<img src=”” />”:
<img src="./p4/imagenes/proyecto1.png" /><br />
<img src="./p4/imagenes/proyecto2.jpg" /><br />
El salto de línea (“<br/>”) es utilizado para separar las imágenes del texto.

El resultado de loa práctica es el siguiente:

Conclusión

Para dar una mejor imagen o explicación del contenido de una página web se utiliza medios multimedia, en este caso se utilizaron imágenes las cuales cambian el aspecto de la página web.

URL de la practica

http://dewe.mypost.skn2.com/practicas/practica6.html

Practica 5

Colegio Nacional de Educación Profesional Técnica

Lic. "Jesus Reyes Heroles"

Nombre del Alumno: José Guadalupe Martínez Cruz

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

Grupo: INFO-604.

Práctica: N° 4.

Introducción
En esta práctica se crean listas para ordenar y/o agrupar la información de un modo jerárquico, dependiendo de su importancia una lista va dentro de otra, es decir, se anidan.
Código HTML
El código que se genero para el archivo de la práctica es el siguiente:

<html>
                <head>
                               <title>Practica 5</title>
                </head>
<body>
                <h1>MENU</h1>
<ul>
    <li>Inicio</li>
                <li><b>Noticias</b>
                               <ul>
                                               <li><a href="#">Recientes</a></li>
                                               <li><a href="#"><b>Mas leidas</b></a></li>
                                               <li><a href="#">Mas valorada</a></li>
                                               </ul></li>
                <li>Articulos
                               <ol>
                                               <li><b>XHTML</b></li>
                                               <li>CSS</li>
                                               <li>JavaScript</li>
                                               <li>Otros</li>
                                               </ol></li>
                <li>Contacto</li>
                               <dl>
                               <dt><i>Email</i></dt>
                                               <dd><b>nombre@direccion.com</b></dd>
                               <dt><i>Telefono</i></dt>
                                               <dd> 900 900 900</li></dd>
                               <dt><i>Fax</i></dt>
                                               <dd>900 900 900</dd>
                </dl>
</ul>
</body>
</html>

Explicación del código
En el código anterior se ocupo la etiqueta de titulo (heading) “<h1>” con su etiqueta de cierre”</h1>” para el titulo que es MENU, posteriormente se creo la primera lista que es desordenada (su viñeta es un punto) y su etiqueta de inicio es “<ul>” y se cierra con “</ul>”;dentro de la esas etiquetas van las viñetas que se determinan con “<li>” se coloca el contenido de la viñeta y se cierra con “</li>” .
En la segunda viñeta que es Noticias se le anido otra lista desordenada y sus viñetas tienen un hipervínculo (etiqueta “<a href=””>&</a>”) con una referencia vacía, la cual no lleva a ningún lado; después de cerrar tal lista se añadió la tercera viñeta de la lista, que es la de “Artículos”, dentro de ella se coloco la lista ordenada que se determina como “<ul>”“<li>” …“</li>” “</ul>” pero se coloca como “<ol>”“<li>” …“</li>” “</ol>” , solo se cambia ul por ol.
Por ultimo, en la 4ª viñeta se coloca un lista de definición, la cual se inicia con “<dl>” y se cierra con “</dl>”, se colocan sus viñetas con”<dt> & </dt>” y su definición o descripción va con las etiquetas”<dd> & </dd>” que se observan con una sangría mayor a <dt></dt>.

El resultado de loa práctica es el siguiente:

Conclusión
Se ocupan diferentes tipos de etiquetas para determina diferente tipo de listas, como lo son las ordenadas “<ol>”“<li>”viñeta“</li>” “</ol>” , desordenadas “<ul>”“<li>” viñeta“</li>” “</ul>” y de definición “<dl>”“<dt>” termino “</dt>” “<dd>” definición “</dd>” “</dl>”; las listas son para agrupar la información y anidándolas se muestra la jerarquía que hay en las diferentes viñetas de las listas.

URL de la practica

http://dewe.mypost.skn2.com/practicas/practica5.html

Practica 4

Colegio Nacional de Educación Profesional Técnica

Lic. "Jesus Reyes Heroles"

Nombre del Alumno: José Guadalupe Martínez Cruz

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

Grupo: INFO-604.

Práctica: N° 4.

Introducción

Crear diversos archivos html y relacionarlos (o enlazarlos) en un orden mediante el uso de hipervínculos, además de de enlazar recursos multimedia, estos están en diferentes carpetas dependiendo del tipo u orden jerárquico.

Código HTML

Los códigos generados para la creación de los archivos .html son los siguientes:

Para el Índice principal

<html>
<head>
<title>Práctica 4</title>
                               <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico ">
</head>
                <body>
                               <h1>MiSitio</h1>
                               <p>Loremipsum dolor sitamet, consectetueradipiscingelit.
                               Doneciaculisposuerejusto. Nam valneque.Proinsagittis mauris sit ametnisl. Sedipsum.Aliquam vitae justo.</p>

                               <h2>Ultimos proyectos</h2>
                               <p>Etiamconsectetuer, mauris vitaecursusscelerisque, dui turpisdignissimjusto,
                               et euismodenimodio sit ameterat.
                               Aliquam dui sligula, porttitoreu, facilisis vitae, ornare sed, tortor.</p>
                               <a href="./portfolio/indice.html">Acceder a los ultimos proyectos de Mi Sitio</a>
                </body>
</html>

Código del segundo Índice

<html>
                <head>
                               <title>Práctica 4</title>
                </head>
<body>
                               <a href="../indice.html">Volver a la pagina principal</a>
                               <h1>Ultimos proyectos</h1>
                               <p>Loremipsum dolor sitamet, consectetueradipiscingelit. Done ciaculis posuere justo. Namvelneque.</p>
                               <h3>Proyecto 1</h3>
                               <p>Etiamconsectetuer, mauris vitae cursusscelerisque, dui turpis dignissim justo, et euismodenimodio sit ameterat.
                               </p><a href="./proyecto1.html">Ver imagen del Proyecto 1</a>
                               <h3>Proyecto 2</h3>
                               <p>Etiamconsectetuer, mauris vitaecursusscelerisque, dui turpis dignissim justo, et euismodenimodio sit ameterat.
                               </p><a href="./proyecto2.html">Ver imagen del Proyecto 2</a>
</body>
</html>

El código del Primer proyecto es el siguiente:

<html>

<head>

<title>Práctica 4</title>

</head>

<body>

<h3>Imagen del proyecto 1</h3>

<img src="../imagenes/proyecto1.png"/><br/>

<a href="./indice.html">Regresar</a>

</body>

</html>

Y el código fuente de la pagina del Segundo proyecto:

<html>

<head>

<title>Práctica 4

</title>

</head>

<body>

<h3>Imagen del proyecto 2</h3>

<img src="../imagenes/proyecto2.jpg"/><br/>

<a href="./indice.html">Regresar</a>

</body>

</html>

Explicación del código generado

En los archivos se ocuparon las etiquetas para el texto “<h1>&</h1>”, “<p>&</p>”, “ <br/>”, pero además se ocuparon las etiquetas de ancla “<a >&</a>”, con la primera de ellas con su propiedad href=”archivo vinculado” se vincula una página a otro archivo, por ejemplo:

<a href="./portfolio/indice.html">Acceder a los ultimos proyectos de Mi Sitio</a>
el cual queda como

Acceder a los ultimos proyectos de Mi Sitio

Se observa que el texto entre las etiquetas es el que contiene el vinculo.

También se ocupo la etiqueta “<img />” , el cual con su propiedad src=”” se coloca la dirección de una imagen para mostrarla en el archivo html, por ejemplo:

El resultado se muestra en la ultima imagen.

En la índice principal se enlazó con las etiquetas “<a href=””>&</a>” hacia el archivo índice.html localizado en la carpeta portfolio; después en el segundo índice (el de la portfolio) se enlazan los archivos proyecto1.html y proyecto2.html.
Por último en los archivos proyecto1.html y proyecto2.html, se les agrego su respectiva imagen con la etiqueta <img src=””/>.

Resultado

Primer indice

Segundo indice

Proyecto 1

Proyecto 2

Conclusión

En esta práctica se elaboraron más de un archivo .html los cuales tenían diferente función, todo este conjunto de archivos html forman un sitio ( web), y para moverse entre ellos se enlazan mediante hipervínculos con las etiquetas “<a href=””>&</a>”, las cuales en las comillas de href=”” se coloca la dirección hacia dónde va dirigido el vinculo; y para agregar contenido multimedia como imágenes se ocupo la etiqueta <img src=””/>, y en su propiedad src=”” se coloca la dirección de la imagen a mostrar.

URL de la practica

http://dewe.mypost.skn2.com/practicas/p4/indice.html

Practica 3

Colegio Nacional de Educación Profesional Técnica

Lic. "Jesus Reyes Heroles"

Nombre del Alumno: José Guadalupe Martínez Cruz

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

Grupo: INFO-604.

Práctica: N° 3.

Introducción

En esta práctica se transcribió en código Html un texto en el cual se resaltaron las partes importantes o con una énfasis en el.

Código generado

El código generado en un editor de texto es el siguiente:

<html>
<head>
<title>
Practica 3
</title>
</head>
<body>
<h3>Del buen suceso que el valeroso don Quijote
tuvo en la espantable y jamás imaginada aventura
de los molinos de viento, con otros sucesos dignos de felice
recordación</h3>
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 más, desaforados gigantes,
con quien pienso hacer batalla y quitarles a todos las vidas,
con cuyos despojos comenzaremos a enriquecer; que ésta 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>¿Qué gigantes?</b> -dijo Sancho Panza.</p>

<p>-Aquellos que alli ves -<i>respondió 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 -respondiódon Quijote- que no estás cursando en esto
de las aventuras: ellos son gigantes; y si tienes miedo, quitate
de ahí, y ponte en oración en el espacio que yo voy a entrar con
ellos en fiera y desigual batalla.</p>
</body>
<html>

Explicación del código generado

En el texto transcribido en el código generado se utilizan las etiquetas de párrafo “<p>&</p>” y de titulo como “<h3>&</h3>”, pero también se utilizaron las etiquetas “<b>&</b>” que son útiles para resaltar en letra negrita (bold) partes de texto; además de las etiquetas “<i>&</i>” , que son para resaltar una énfasis en letra cursiva en el código, por ejemplo:
<i>respondió Sancho</i>
el cual se aprecia así:
respondió Sancho

También se ocupo la etiqueta “<br/>” para dar un salto de línea para separar aun más los párrafos o textos.

Resultado

El código anterior en un navegar, en este caso se probó chrome, se muestra de la siguiente forma:

En el se nota que la primera parte se ocupo las etiquetas de titulo; después se escribieron las líneas de “Miguel de Cervantes Saavedra” en negritas seguido de un salto de línea, posteriormente los demás son solamente párrafos con partes en cursiva o negrita.

Conclusión

Para dar una énfasis o importancia a algunas partes de un texto en una página web se utiliza las etiquetas “<b>&</b>” para letra negrita, aunque también están las etiquetas “<strong>&</strong>”, que tienen la misma función; y “<i>&</i>” para letra itálica o cursiva. Y para crear un simple salto de linea(enter en un editor de texto) se ocupa la etiqueta “<br/>”.

URL de la practica

http://dewe.mypost.skn2.com/practicas/practica3.html

Práctica 2

Colegio Nacional de Educación Profesional Técnica

Lic. "Jesus Reyes Heroles"

Nombre del Alumno: José Guadalupe Martínez Cruz

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

Grupo: INFO-604.

Práctica: N° 2.

Introducción

En esta práctica se da una estructura a las páginas empleando secciones, para ayudar a la fácil lectura de la información.

Código Fuente

El código generado en la práctica es el siguiente:

<html>
                <head>
                <title>
                               Practica 2
                </title>
                </head>
<body>
  &anbsp;             <h1>Titular de la página</h1>
                               <p>Párrafo de introducción...</p>
                <h2>La primera sub-sección</h2>
                               <p>Párrafo de contenido...</p>
                <h2>Otra sub-sección</h2>
                               <p>Máspárrafos de contenido...</p>
</body>
<html>

Explicación del código generado

En el archivo html se introdujo el código anterior, el cual utiliza las etiquetas “<h1>&</h1>” , para resaltar un título, en este caso fuel el texto Titular de la página, y “<h2>&</h2>” para separar los otros títulos o subtítulos que en el archivo son las secciones. También se ocuparon las etiquetas “<p>&</p>” para separar los párrafos.

Resultado

El codigo generado en la práctica se puede apreciar de la siguiente manera en un navegador web:

Conclusión

El uso de secciones es importante para facilitar la compresión de la información por parte del usuario de un sitio web, para crear secciones se ocupan las etiquetas de título como lo son “<h1>&</h1>” , “<h2>&</h2>”, “<h3>&</h3>”, hasta “<h7>&</h7>”; y las etiquetas de párrafo “<p>&</p>”.

URL de la practica

http://dewe.mypost.skn2.com/practicas/practica2.html

miércoles, 20 de marzo de 2013

Practica 1

Colegio Nacional de Educación Profesional Técnica

Lic. "Jesus Reyes Heroles"

Nombre del Alumno: José Guadalupe Martínez Cruz

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

Grupo: INFO-604.

Práctica: N° 1.

Proposito

Crear un documento html con dos parrafos, los cuales se rerán creados con la etiqueta html asignada para ello.

Desarrollo

Primero se crea la estructura básica que debe contener un archivo HTML; posteriormente se transcribió el texto que se señala:

“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. El segundo párrafo de la página también se define encerrando su texto con la etiqueta p. El navegador también se encarga de separar automáticamente cada párrafo.”

Este se separa en dos párrafos por las etiquetas <p> & </p>, desde ”Este es el…” hasta “…de la ventana.” y desde El segundo párrafo…” hasta “…cada párrafo.” que son utilizadas para crear los párrafos.

Quedando el siguiente código:

<html>
<head>
<title>Practica N. 1
</title>
</head>
<body>
<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>
<p>El segundo párrafo de la página también se define encerrando su texto con la etiqueta p.
El navegador también se encarga de separar automáticamente cada párrafo.</p>
</body>
<html>

También se utilizo &(vocal)acute; para las vocales como á = &aacute;, y ñ para la ñ.

El resultado del código es mostrado es:

Pantalla de la Practica 1

Conclusión

Las etiquetas <p> & </p> se utilizan para ordenar el texto de un página web en párrafos separados, el cual se ajusta con el tamaño de la ventana, y así mostrar de una mejor forma la información de la página; á y é sirven para que se interpreten los acentos en a o e, y ñ para la ñ, y evitar mala interpretaciones del navegación.

URL de la practica

http://dewe.mypost.skn2.com/practicas/practica1.html