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: 47

Visitas el mes pasado: 85

logo

Donativos

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




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


conexión a Internet

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:

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



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