Está usted en Indice > Construcción > Lenguajes > CSS > Lecciones y Paso a Paso > Galeria de Imagenes xHTML CSS
Construcción
Maletín
Utilidades
Cursos
Promoción
Rentabilidad
Zona Novatos
Foros
Acceso a tu cuenta

Galeria de Imagenes xHTML CSS (2)

Otra de las diferencias es que toda etiqueta (o tag), se debe escribir en minúsculas en xHTML, ya que en HTML podíamos ver y escribir cualquier cosa, también otro tema bastante desprolijo.

Luego en esta primer parte utilizaremos la etiqueta <p>, que termina con </p>, y se utiliza para párrafos de texto, y por ultimo la etiqueta <a>, que termina con </a>, para mostrar hipervínculos o links a otras paginas.

Saliendo de tanta teoría, vamos directamente al código final de despliegue de nuestras imagenes, que quedaría así:

<html>
<head>
<title>Galería de Imagenes Taller Webmaster</title>
</head>
<body>

<div id="contenido">
<h1>Galeria de Imagenes Taller Webmaster</h1>
<ul>
<li><img src="reducciones/imagen1.jpg" /></li>
<li><img src="reducciones/imagen2.jpg" /></li>
<li><img src="reducciones/imagen3.jpg" /></li>
<li><img src="reducciones/imagen4.jpg" /></li>
<li><img src="reducciones/imagen5.jpg" /></li>
<li><img src="reducciones/imagen6.jpg" /></li>
<li><img src="reducciones/imagen7.jpg" /></li>
<li><img src="reducciones/imagen8.jpg" /></li>
<li><img src="reducciones/imagen9.jpg" /></li>
<li><img src="reducciones/imagen10.jpg" /></li>
</ul>
<p>Imagenes de la Actividad de Fotomanipulacion en <a href="http://www.forocreativo.net/" target="_blank">Foro Creativo</a></p>
</div>

</body>
</html>

Todo nuestro despliegue de contenido esta dentro de un <div> que le hemos llamado "contenido", esto sera útil mas adelante, por ahora saber que id, nos permite darle un nombre que identifique un elemento de nuestro xHTML, ese nombre pudo ser cualquiera y no se pueden usar símbolos, de hecho es mejor usar letras únicamente.

Luego hemos indicado un cabezal que dice "Galeria de Imagenes Taller Webmaster", que se ha colocado dentro de las etiquetas <h1>, luego presentamos las imagenes en una lista desordenada, veamos que comienza con <ul>, luego hay un elemento <li> por cada imagen, que son 10, y en esa lista se muestra obviamente la imagen jpg que tenemos en nuestra carpeta "reducciones".

Para mostrar la imagen, usamos la etiqueta <img>, donde indicamos en la propiedad src (source = fuente, a mi me gusta llamarle origen), el nombre del archivo.

Finalmente hemos agregado un parrafo de texto, que tiene un hipervínculo a Foro Creativo, indicando la url en la propiedad href, y el target _blank indica que se debe abrir ese link en una nueva ventana.



Usuarios que han visto este tema también han visto...

- Estilos CSS distintos con PHP y cookies
- Cambiar el cursor del ratón con CSS
- Controlar el desbordamiento en una etiqueta con CSS
- Bordes Punteados con CSS
- Personalizando las barras de scroll del navegador en CSS


Versión imprimible - Versión imprimible de este documento
Enviar e-mail - Enviar por e-mail este documento
Publicidad






Cursos de Community Manager

Información legal | Política de Privacidad | Contacte con nosotros

Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.


Página generada el 13-02-2012 a las 09:23:53