Antes de Todo

Empezando de Cero
Creando nuestro Sitio
Presentandoles al Html
Nuestra primera página
Nuestro Primer parrafo
Vista previa
Insertar una imagen
Creando los enlaces
Nuestra hoja de estilos
Aplicando estilos
Capas y Divs
Trabajando con Divs
Formando la estructura
Como vamos hasta aca

"Insertar una imagen

Seguramente ya están un poco cansados de trabajar solo con texto así que ahora aprenderemos juntos a insertar una imagen en nuestra web, sea una foto, una animación, una imagen cualquiera es indistinto a nuestro propósito.

Haciendo un poco de memoria recordamos que nuestro código html quedo así:

Así que hasta ahí estamos bien, primero necesitamos una imagen para colocarla en nuestra web, bueno puede ser cualquier imagen que tu tengas en tu ordenador o que logres conseguir de internet, pero para mi caso pondré esta:

Solo tienen que darle click derecho a la imagen y seleccionar Guardar Como y almacenarla en su ordenador.

OJO, recuerden que la imagen que pretender colocar en su página tiene que estar dentro de la sub carpeta “imagenes” de su carpeta local “miweb”. Para que no haya confusión mediante vayamos avanzando el curso seria genial si todos llamamos a esta primera imagen con un nombre, el nombre que le asignaremos será objeto1.jpg, recuerden jpg es la extención.

 En el dreamweaver hay diferentes formas de insertar una imagen, nosotros lo haremos con nuestro html para que conozcamos mas sobre este potente lenguaje.

Pero axel…… no será muy fuerte lo que nos mostraras?- NO amigos van a darse cuenta que mientras mas conozcamos como esta echo nuestra web en este caso el html, mas control tendremos sobre esta, creanme.

Nos ubicamos en la última parte de nuestro código que ya tenemos en nuestros página Index así que vamos a cambiar de línea y como supongo que me están entendiendo ya sabrán que etiqueta poner.. exacto la < br /> y cambiamos a la siguiente línea en nuestro código para mas orden, recuerden que cambien de línea con enter en nuestro código no quiere decir que lo cambiaran en el diseño.

Ahora si escribimos este pedazo de código

Ahora si le dan una ojeada a la pestaña diseño se darán cuenta que su imagen se coloco debajo de su ultimo texto. Esto es posible gracias al html pero como se que tu no te conformas vamos a explicarte el código paso a paso.

<img> es la etiqueta dela imagen como ves todo esta contenido dentro de ella, src=”imágenes/objeto1.jpg” es la parte de código donde le indicas al programa la ruta de tu imagen, siempre empieza con el src seguido del = y entre comillas la ruta de tu imagen dentro de tu carpeta local claro esta, en nuestro caso imágenes que es la carpeta donde pusimos la imagen, recuerdan?... y objeto1.jpg es como se llama nuestra imagen, siempre tienen que incluir la extensión en este caso jpg.

Ahora tenemos alt=”texto alternativo” que básicamente es la palabra que representa tu imagen, cuando tu pones el puntero del mouse en la imagen saldrá la palabra o grupo de palabras que tu hayas puesto dentro de esa etiqueta, también tenemos longdesc="Descripción larga" que viene a ser ya la descripción de tu imagen y/o de la página donde esta contenida, estas etiquetas son muy útiles para la promoción de tu web así que les recomiendo que siempre las pongan, yo reemplazaré texto alternativo con “primer objeto” y en descripción larga  lo reemplazare con “Mi primer objeto de Axside ”. Y por ultimo tenemos width="150" height="150", width vendría a hacer el ancho de nuestra imagen y height el alto, en ambos casos nuestra imagen tiene 150 pixeles pero no es necesario ponerlo así que queda solo así

Como ven no es muy difícil esto de los códigos solo es cuestión de practicarlo y créanme les servirá de mucho mas adelante a nadie le ah dado un derrame cerebral por esto así que no crea que ustedes sean los primeros (espero jeje).

Pero para que vayan familiriarisandose con las herramientas del Dreamweaver también podrán insertar imágenes de 2 formas mas, una es arrastrando la imagen desde la paleta archivos a su derecha y soltándola en el lugar donde quieren que este, cuando la suelten les saldrá una ventana donde les pide poner el texto alternativo y la descripción larga.

La otra es desde la barra de herramientas, nos vamos a Insertar > Imagen y nos saldrá un cuadro donde nos pide seleccionar nuestra imagen, lo hacemos y damos a aceptar, luego nos saldrá la misma ventana anterior pidiendo el texto alternativo y la descripción larga. Ahora solo nos queda darle F12 para la vista previa de nuestra página.

Pero Axel, oseaaa esas 2 ultimas formas me parecieron recontra mas fáciles que la otra lata con el código- Lo se pero te lo vuelvo a decir creeme, si tu quieres tener un control TOTAL sobre tu web es imprescindible que sepas bien tu código ya después cuando lo manejes podrás hacerlo a tu modo, pero siempre es bueno saber el porqué de lo que estas haciendo.

Ahora, vayamos por aprender a crear los enlaces.

<<<<< Anterior Siguiente >>>>>