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: 1
Visitas el mes pasado: 13
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 (II)
3.2 Posicion de la imagen (I)
Dónde poner la imagen
La imagen insertada en el paso anterior nos ha quedado debajo del texto y a la izquierda. Sin embargo nos gustaría que estuviera a la derecha del texto y con la parte superior a la altura del primer párrafo. También creo que quedaría mejor si fuera un poco más pequeña.
para ello vamos a utilizar otra vez el archivo CSS. aunque antes vamos a cambiar un poco el archivo index.html.
Cambiar la imagen de sitio
Si recuerdas la línea que hemos escrito en el block de notas para insertar la imagen era la siguiente:
<img src="objetos/dibujo.gif" alt="conexión a Internet"/>
Esta línea la hemos puesto al final del texto; por eso vemos la imagen debajo del último párrafo. Como queremos que la imagen se vea después del segundo título ( etiqueta <h2> ), la cambiaremos y la pondremos despues de la etiqueta <h2>
Abre el archivo index.html, y despues de la línea donde está la etiqueta <h2> ... </h2>; escribiremos la línea de código para la imagen, después borraremos la linea final donde esta otra vez el código de la imagen. (también puedes usar el método de "cortar y pegar" para cambiar la línea de sitio.)
El código de la página index.html quedará así:
<html>
<head>
<title> Mi Web</title>
</head>
<body>
<h1>Mi Primera Web</h1>
<h2>Bienvenido a mi web</h2>
<img src="objetos/dibujo.gif" alt="conexión a Internet"/>
<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>
</body>
</html>
Como siempre, guarda y cierra el archivo del block de notas. y abre el archivo index.html con el navegador para ver los cambios.
Tu página quedará así: Ver mi Web
Como puedes ver ahora la imagen está después del segundo título, pero no está todavía donde queremos; por tanto vamos a seguir retocandola.
reducir la imagen
Para reducir la imagen lo primero que debemos saber es cual es su tamañó. Para ello nosotros usaremos el progrma Paint que viene instalado con Windows.
Abrimos el programa Paint Lo encontrarás en tu ordenador, pulsando en : "Inicio / todos los programas / accesorios / Paint". Una vez abierto pulsa en "Archivo / Abrir" (barra superior), buscamos y abrimos el archivo de imagen (recuerda la ruta: Mis documentos / mi_web / objetos / dibujo ).
Vemos ahora la imagen en la pantalla del programa. En la barra superior pulsamos en "imagen" y después en "atributos". Se abre un cuadro. Dentro del cuadro, donde pone "unidades" pulsamos en "pixeles". Obtenemos las medidas de la imagen en píxeles, que son : ancho 380 , alto 318. Apuntamos estas cantidades y cerramos el programa, pero sin guardar cambios.
Queremos reducir la imagen un 25%. La imagen tendrá por tanto un tamaño igual al 75% de la original. (100% - 25% = 75%). Calculamos el 75% del ancho y el alto y tenemos: ancho=285 ; alto 238.
Ahora abrimos el archivo index.html con el bloc de notas, y modificamos la etiqueta de la imagen de la siguiente forma:
<img src="objetos/dibujo.gif" alt="conexión a Internet"
width="285px" height="238px" />
El atributo width indica el ancho de la imagen y el atributo height
indica el alto.
Como ves, el texto en azul es el que debes añadir en la etiqueta de la imagen. Una vez añadido el texto guardamos y cerramos el archivo.
el resultado debe ser éste: Ver mi Web
La imagen se ha reducido de tamaño, pero todavía hay que colocarla a la derecha, y hacer que el texto se coloque a su izquierda.
Esto lo veremos en el siguiente paso: Posicion de la imagen (II)
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