Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 71

Visitas el mes pasado: 84

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




2. No sólo texto (I)

2.1 Imágenes.

Paso 4

logo miweb

La carpeta de objetos

Nuestro siguiente paso será insertar una imagen en la página. Para ello debemos guardar la imagen en la carpeta raíz de nuestra web. Como seguramente pondremos más de una imagen en nuestra web, dentro de la carpeta raíz crearemos una subcarpeta en la que guardaremos todas las imágenes así como otro tipo de archivos que no formen parte del código que escribimos, pero sí de la página.

Para ello abrimos nuestra carpeta raíz y creamos allí una nueva carpeta a la que llamaremos objetos. Nosotros tenemos la carpeta raíz en Mis Documentos / Mi_web. Para añadir una nueva carpeta pulsamos en la barra superior, donde pone "Nueva carpeta", y se crea una nueva carpeta (en windows7). Con un click sobre el nombre de la carpeta podemos cambiarle el nombre. Le cambiamos el nombre y la llamamos objetos.



Crear carpeta objetos
La carpeta raíz con la subcarpeta objetos

Copiar una imagen

Lo siguiente que haremos será guardar una imagen en la carpeta objetos. Nosotros pondremos la imagen que vemos aquí a la derecha.

logo

Para ello hacemos click sobre la imagen con el botón derecho del ratón. Nos sale un cuadro con varias opciones. Pulsamos sobre la opción Guardar imagen como ... , y se nos abrirá un cuadro para buscar la carpeta en la que queremos guardar la imagen. Buscamos alli la carpeta objetos que hemos creado anteriormente, (Mis Documentos / Mi_web / objetos) y guardamos allí la imagen.

Asegúrate de que el nombre del archivo de imagen sea logo.gif. Si no es así cambia el nombre del archivo de imagen.

Etiquetas de imagen

Para insertar una imagen en una página web utilizaremos una etiqueta de imagen. Esta la escribiremos, en su forma básica, de la siguiente manera:

<img src="..." alt="..."/>

Vemos una serie de novedades en esta etiqueta. Vemos que además del nombre de la etiqueta (img), tiene otra serie de elementos dentro de la misma etiqueta (src="...", alt="..."). Estos elementos son los atributos.

Todas las etiquetas de apertura pueden tener atributos, cada atributo consta de dos partes separadas por el signo igual. La primera parte del atributo es el nombre, aquí se indica algo que se añade a la etiqueta. La segunda parte, siempre escrita entre comillas, es el valor, e indica un valor que tomará lo indicado en la primera parte.

Por otra parte las etiquetas de imagen no tienen etiqueta de cierre, ya que toda la información que necesitamos va en los atributos. La etiqueta se abre y cierra en sí misma, esto se indica con una barra inclinada al final de la etiqueta (<img ... />).

Veamos ahora los atributos que pueden tener las etiquetas de imagen:

El atributo src

Con este atributo indicamos qué imagen queremos insertar en la página, para ello localizamos la imagen e indicamos dónde está. Es decir hay que poner la "ruta" que lleva al archivo de imagen. Si el archivo de imagen está en la misma carpeta que la página simplemente tenemos que indicar el nombre del archivo (indicando también la extensión), si no es así indicaremos también la carpeta en la que está. Por ejemplo nosotros para insertar la imagen pondremos lo siguiente:

<img src="objetos/logo.gif" />

Aquí indicamos que la imagen está dentro de la carpeta objetos. Ponemos después una barra inclinada que indica que entramos en la carpeta objetos. Despues escribimos el nombre del archivo de imagen que queremos insertar, en este caso logo.gif . Fíjate que debemos poner también la extensión que tiene el archivo de imagen. (.gif).

Si la imagen estuviera en una carpeta de nivel superior a la de la página indicaremos que subimos un nivel en la jerarquía de carpetas escribiendolo así: ../ (dos puntos y una barra inclinada).

De esta manera podemos localizar la ruta de cualquier imagen subiendo o bajando carpetas, e indicando, una vez localizada la carpeta, el nombre de archivo de imagen.

El atributo alt

Este atributo, aunque no es imprescindible, indica un texto que se verá en el caso de que la imagen no pueda cargarse. Como valor pondremos el texto. Por ejemplo:

<img src="objetos/logo.gif" alt="Logo de la página" />

Otros atributos

Los atributos width="" y height="" indican respectivamente la anchura y la altura de la imagen en la página. Como valor podemos poner un número, que indicará el número de píxeles que ocupa la imagen, también podemos poner un porcentaje (por ejemplo width="20%").

Si ponemos los dos atributos (width y height) debemos tener cuidado de no distorsionar la imagen. Si ponemos sólo uno, la otra medida se adaptará a la que hemos puesto, guardando las proporciones de la imagen.

<img src="objetos/logo.gif" alt="Logo de la página" width="20%" />

Insertar la imagen en la página

Con lo visto anteriormente no nos será difícil insertar la imagen en la página. Suponemos que ya hemos copiado la imagen en la carpeta objetos; después La pondremos al principio. Para ello abrimos el archivo index.html con el block de notas de Windows, y lo modificamos, insertando una etiqueta de imagen.

<html>
  <head>
    <title>Mi Propia Web</title>
  </head>
  <body>
    <img src="objetos/logo.gif" alt="Logo de la página" width="15%" />
    <h1>Mi Propia Web</h1>	
    <h2>Aprendiendo a construir un sitio Web</h2>
    <p>Hola, estoy aprendiendo a hacer Webs y este es mi primer párrafo, 
    no es muy largo, pero es un párrafo.</p>
    <p>Este ya es mi segundo párrafo. Para construir un sitio web como éste,
    hay que usar el lenguaje HTML. El HTML es un lenguaje de etiquetas. 
    Con las etiquetas indicamos qué tipo de contenido insertamos en la página.</p>
  </body>
</html>

En color azul hemos destacado el nuevo texto que hemos puesto en el archivo HTML de la página. Con esto hemos insertado la imagen que tenemos dentro de la carpeta objetos. la página quedará ahora como la del siguiente enlace:

Si has seguido los pasos anteriores tu página quedará ahora como la vista en el anterior enlace. Si no puedes ver la imagen o no te sale igual, repasa lo visto anteriormente, y fíjate en que la ruta de la imagen (el valor del atributo src) esté bien puesta, e indique el lugar en el que hemos guardado la imagen.

De momento estamos insertando cosas en la página. No te preocupes si el aspecto de la página queda algo desordenado y parece más un documento de texto que una página web. En pasos posteriores le daremos estilo a la página.


En el siguiente paso veremos cómo poner enlaces a otras páginas.

Enlaces externos.



Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com