4. Una imagen vale más que mil palabras - Insertar imágenes
Tras un verano desconectado, y mucho estrés al comenzar un curso nuevo y duro, me decido por continuar con el manual de HTML que comencé antes del verano. En este cuarto capítulo, vamos a hablar sobre las imágenes en internet, como insertarlas, que formatos son válidos y qué se puede hacer con ellas.
Comenzaré diciendo que las imágenes son etiquetas especiales, como los <br /> , que se cierran por si mismas. en este caso son etiquetas tal que así: <img />
Obviamente con eso no puede salir nada, puesto que no le hemos dado ninguna información sobre la imagen. Para ello, vamos a darle el atributo "src ", que le dirá la ruta de donde obtener la imagen. ¿Qué cómo se hace eso? Myt fácil. Lo primero que necesitamos es una imagen, que podemos encontrar en google, como por ejemplo "http://webdelprofesor.ula.ve/economia/arandes/curriculo.gif ". ¿Ya tienes tu imagen? Genial, ahora sólo hay que añadirla así:
<img src ="http://webdelprofesor.ula.ve/economia/arandes/curriculo.gif" />
Ahora mismo, allí donde coloques este código (entre las etiquetas <body> y </body> , si no no se verá ) aparecerá la imágen. Pero... ¿no os resulta un poco GRANDE? Bien, a mi también, y yo creo que para nuestro Curriculo (el ejemplo práctico que estamos intentando conseguir) vendría mejor un poco más pequeña, así que vamos a reducirla.
OJO : Este procedimiento no reduce la imagen original, sólo la imágen que se muestra en la página. Vamos, que en la página se muestra más pequeña de lo que realmente es.
Para ello, utilizaremos las propiedades "height " y "width " (altura y anchura respectivamente). El uso que tienen es el mismo que el de "src", así que al lío. Originalmente, nuestra imagen tiene 1115x848 píxeles (muy grande). El tamaño de una imagen se ve en la barra de título (en firefox al menos) cuando vas a la URL de la imagen (la que he puesto arriba). Vamos a reducir un poco esta imagen, más o menos a una cuarta parte.
Ahora viene lo más complicado, porque hasta que no llevas un tiempo con HTML o con programas de edición gráfica en general, no te haces una idea de cuánto es un píxel y cuantos son cien. Para ello, yo desarrollé una técnica que me ha dado muy buenos resultados. Consiste en ver cuántas veces más pequeña debería ser , y dividir la altura y la anchura en ese número. En este caso, lo queremos cuatro veces menor, por tanto 1115:4=278.75 y 848:4=212 .
Ya tenemos las dimensiones de nuestra imagen: 279x212 (Los píxeles no se pueden dividir en decimales, así que redondeamos si alguna cifra nos sale con decimales, p.e. 278.75~279 ). Ahora sólo lo añadimos a la etiqueta:
<img src="http://webdelprofesor.ula.ve/economia/arandes/curriculo.gif" height="279" width="212" />
Y si queréis ver de antemano como queda...
Y para añadirla en nuestro ejemplo...
<html>
<head>
<title> Mi currículo </title>
</head>
<body>
<p>CURRICULUM VITAE</p>
< img src="http://webdelprofesor.ula.ve/economia/arandes/curriculo.gif" height="729" width="212" />
<p>Nombre completo: <br />
Un tal Carlos</p>
<p>Estudios: <br />
ESO y 1º de Bachillerato</p>
<p>Inglés: <br />
Si, nivel básico</p>
<p>Otros conocimientos: <br />
HTML, Plataformas CMS de software libre.</p>
<p>Email de contacto: <br />
ejemplo-html@mini-manual.de </p>
</body>
</html>
Y daría como resultado algo así:
CURRICULUM VITAE
Nombre completo:
Un tal Carlos
Estudios:
ESO y 1º de Bachillerato
Inglés:
Si, nivel básico
Otros conocimientos:
HTML, Plataformas CMS de software libre.
Email de contacto:
ejemplo-html@mini-manual.de
<tbody> <tr> </tr> </tbody>
| «Capítulo anterior | Capítulo siguiente » |
Comentarios
partyflipo - hace más de 14 años
Me alegra ver continuar la serie de html. Los que no sabemos de esto agradecemos MUCHO estas explicaciones tan claritas :-)
un tal carlos - hace más de 14 años
Gracias, Partyflipo. Es genial saber que a alguien le es útil. En breves tendremos el siguiente capítulo listo ;)
No se pueden incorporar más comentarios a este blog.