Inicio
Software
Programación
HTML Programación - PHP (ini) Programación - PHP POO Programación - PHP / HTML SQL Java
Hardware
Desarrollos
Quién soy Mapa del sitio

HTML - 12da Entrega Imagenes con prácticas varias.

Imprimir
Categoría: HTML
Escrito por Ch4rl1X Visitas: 1359

Para este Post vamos a ver como levantar nuestras imágenes y que se puedan visualizar en nuestro sitio. A diferencia de nuestro código web una imagen es físicamente un archivo que se encuentra en algún lugar de nuestro sitio. Existen varias maneras de traer imágenes a nuestros sitios, por ejemplo si usáramos un motor de bases de datos se podrían guardar adentro del mismo, lo cual no  nos interesa por ahí en alguna práctica con PHP lleguemos a ver algo. Los tipos de imágenes que vamos a traer son JPG, PNG, BMP GIF, etc, etc.

Traer imágenes es tan sencillo como usar la etiqueta <img src"carpeta/nombreDelArchivo.jpg">. Sabiendo ésto te muestro como queda la primer práctica:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Imagenes</title>
<meta name="description" content="Practica con imagenes.">
<meta name="keywords" content="archivos, enlaces">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<h1 align="center">Im&aacute;genes tra&iacute;das desde directorio</h1>
<img src="http://www.charlesweb.com.ar/pruebas/pruebas/HTML/imagenes/mickey.jpg" alt="" width="100px">

</body>
</html>

Allí vemos que establecemos la etiqueta HREF con la dirección en donde se encuentra nuestra imágen, ésto podría ser un enlace externo como se ve. Aunque si variamos la ruta el siguiente produce el mismo resultado:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Imagenes</title>
<meta name="description" content="Practica con imagenes.">
<meta name="keywords" content="archivos, enlaces">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<h1 align="center">Im&aacute;genes tra&iacute;das desde directorio</h1>
<img src="/pruebas/pruebas/HTML/imagenes/mickey.jpg" alt="" width="100px">

</body>
</html>

Resultado -> Click aquí

También la imagen puede tener un enlace a un sitio en particular:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Imagenes</title>
<meta name="description" content="Practica con imagenes.">
<meta name="keywords" content="archivos, enlaces">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<h1 align="center">Im&aacute;genes tra&iacute;das desde directorio</h1>
<a href="http://www.charlesweb.com.ar"><img src="/pruebas/pruebas/HTML/imagenes/mickey.jpg" alt="" width="100px"></a>

</body>
</html>

Resultado -> Click aqui

Es tan sencillo como anidar la etiqueta <a> y decirle a que sitio tiene que ir a parar.

Jugando con los atributos de la imagen y posición:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Imagenes</title>
<meta name="description" content="Practica con imagenes.">
<meta name="keywords" content="archivos, enlaces">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<h1 align="center">Im&aacute;genes tra&iacute;das desde directorio</h1>
<div name="Imagen" align="center">
<a href="http://www.charlesweb.com.ar"><img src="/pruebas/pruebas/HTML/imagenes/mickey.jpg" alt="" width="100px" height="50"></a>
</div>
</body>
</html>

Resultado -> Click Aqui.

Importante: Cuando se modifican los atributos de una imagen lo estamos haciendo a partir del contenido del archivo, es decir, si tenemos una imagen de 2mb de 1920x1080 y le modificamos para que se muestre en 200px x 100px la imagen va a tardar lo mismo en cargar ya que sólo le estamos modificando sus atributos de salida... el archivo va a seguir siendo el mismo, ya vamos a ver como con un simple código PHP podemos restringir la subida de imagenes de determinado peso y jugar con los atributos.

Espero que sirva, saludos, Ch4rl1X!