Diseño y Elaboración de Páginas Web: 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

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

jueves, 21 de marzo de 2013

Practica 4