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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 20
Visitas el mes pasado: 14
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
3. Insertar imágenes (I)
3.1 Insertar imágen.
copiar una imagen
Vamos a insertar una imagen en nuestra página. para ello lo primero que necesitamos es tener la imagen, y colocarla en la carpeta raíz.
Para llevar un orden, crearemos dentro de la carpeta raíz una nueva carpeta llamada objetos.
Nuestra capeta raíz es la carpeta mi_web donde guardamos los archivos que forman nuestra Web. Para crear la carpeta objetos, hacemos igual que hicimos para crear la carpeta raiz: es decir una vez abierta la carpeta mi_web pulsamos en "Archivo / nuevo / carpeta". Se crea una carpeta llamada "nueva carpeta"; con el botón derecho pulsamos en esta carpeta y en el menú que aparece pulsamos en "cambiar nombre".El nombre de la carpeta se verá en blanco sobre fondo azul, y dentro de un recuadro. Escribimos allí: objetos, y hacemos clic después en cualquier espacio en blanco fuera de la carpeta.
la imagen que vamos a insertar es la siguiente
Para copiar esta imagen en tu ordenador, haz clic sobre ella con el botón derecho del ratón; te saldrá un cuadro con varias ocpiones. Pulsa en "Guardar imagen como..."; te aparecerá una ventana llamada "Guardar imagen". Buscas ahí la carpeta "objetos" que acabamos de crear: (Ruta: Mis documentos / mi_web / objetos), y en el cuadro inferior donde pone nombre escribes dibujo. Fíjate que en el otro cuadro inferior, donde pone tipo pone GIF image; esto indica el tipo de archivo que es; es decir la extensión; de la cual conviene acordarse, pues tendremos que indicarla en el nombre del archivo. Pulsamos en guardar y listo.
Insertar la imagen en la página.
Si has hecho el paso anterior correctamente, deberás tener el archivo dibujo.gif (o simplemente dibujo), dentro de la carpeta objetos.
Ahora abre el archivo index.html con el bloc de notas; y al final de todo lo que tienes escrito escribes en una línea aparte:
<img src="objetos/dibujo.gif" alt="conexión a Internet"/>
Hemos introducido una nueva etiqueta, que usaremos para insertar imágenes. Vamos a explicarla:
- img indica "imagen" y debe ponerse siempre al principio.
- src="...." indica la ruta de la imagen, es decir, dónde está el archivo. Donde están los puntos suspensivos, debemos poner la carpeta donde está, y el nombre del archivo con su extensión; siempre partiendo desde la carpeta en donde está nuestra página. Es decir desde la carpeta mi_web, para llegar a el archivo de imagen debemos abrir la carpeta objetos y después el archivo dibujo.gif; así que lo que debemos escribir en la ruta de archivo es: "objetos/dibujo.gif.
- alt="....".En caso de que no se viera el archivo de imagen; veríamos el texto que ponemos aquí entre comillas. En muchos navegadores, también se ve este texto al pasar el ratón por encima de la imagen. Esta parte es opcional, y podemos prescindir de ella, aunque se recomienda ponerla.
- Como has podido observar, esta etiqueta no tiene otra etiqueta de cierre, es única, por lo que al final de ella ponemos una barra inclinada ( ... /> ).Esta barra no es necesaria, pero es recomendable ponerla para poder ser leída correctamente por todos los navegadores.
En el bloc de notas, el archivo index.html debe quedar así tras insertar la etiqueta de imagen:
<html>
<head>
<title> Mi Web</title>
</head>
<body>
<h1>Mi Primera Web</h1>
<h2>Bienvenido a mi 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. Procuraré que sea más largo que el primero, así que os voy a contar qué he aprendido hasta ahora. De momento he aprendido que el código de cualquier Web va encerrado dentro de la etiqueta HTML . Dentro de esta etiqueta está en primer lugar la etiqueta HEAD , y dentro de ésta ponemos el título en la etiqueta TITLE; y en segundo lugar la etiqueta BODY donde ponemos lo que queremos que se vea en la Web: de momento el texto. </p>
<img src="objetos/dibujo.gif" alt="conexión a Internet"/>
</body>
</html>
Una vez insertado el texto de la etiqueta de imagen guardamos y cerramos el bloc de notas. Abrimos el archivo index,html con el navegador, y comprobamos:
nuestro archivo debe quedar así: Ver mi Web.
Si no logras ver la imagen, es que has tenido algún fallo, repasa el texto introducido y la ruta (src=" ..."); seguro que está ahí el fallo.
Como puedes observar, la imagen se ha insertado, pero el lugar donde está no es el que queremos, y su tamaño tal vez es demasiado grande. todo ello lo corregiremos en los siguientes pasos.
Vamos al paso siguiente: Posición de la imagen
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com