Hoy agregaremos imágenes y enlaces a nuestra web, para esto veremos dos tag nuevos "img" y "a"
El tag "img" nos brinda la posibilidad de incluir imágenes ya sean png, jpg, gif es muy sencilla su aplicación, simplemente colocamos la dirección de la misma como valor de la propiedad "src" de este tag, podemos configurar el alto y ancho con "height" y "width" respectivamente, podemos flotarla con la propiedad "float" q admite "left y right", agregarle una descripción q aparecerá si hay algún problema al cargar la imagen con la propiedad "alt" y un titulo o referencia de la imagen q aparecerá al pasar con el mouse con la propiedad "title". Veamos un ejemplo q aclara más el uso y la aplicación de las distintas opciones.
Uno de los problemas más comunes al trabajar con imágenes se dá con el direccionamiento de las mismas, esto es, creemos q la dirección q colocamos en el "src" es la correcta pero al cargar nuestra página no vemos las imágenes, bueno entonces cómo debemos trabajar para evitar problemas de este tipo:
-Lo principal es usar direcciones relativas y no absolutas, esto es direccionar desde la posición actual y no colocando toda la ubicación, estos son ejemplos de distintas direcciones.
Pero porq no usar direcciones absolutas? simplemente por el echo de q puede cambiarse la ubicación de nuestros archivos q conforman la página y de esta forma las imágenes no serán encontradas por el navegador, al subir nuestra web a un host si trabajamos usando direcciones absolutas no nos funcionará correctamente.
-Debemos tener bien claro el arbol q conforma nuestra web, o sea todos los archivos involucrados en la misma, para poder apuntar correctamente las imágenes. Recomiendo para q el trabajo sea más ordenado usar carpetas donde colocaremos los archivos necesarios y así de esta manera sean de fácil ubicación. Un ejemplo sería algo como esto.
-Se pueden dar varios casos, q la imagen se encuentre en la misma carpeta q el archivo ".html" q la esta llamando, q la imagen se encuentre dentro de una carpeta, o q se encuentre fuera de la carpeta, según esto vamos a trazar la dirección de la imagen de la siguiente manera:
Imagen dentro de la misma carpeta q el archivo html q la llama
Es el caso mas simple, su direccionamiento sería directamente
Aclaramos q el nombre debe estar acompañado del tipo de imagen, si colocamos un tipo equivocado no será encontrada la misma.
Imagen dentro de una carpeta
En este caso tendremos q ingresar a la carpeta correspondiente y recien llamar a la imagen. En este caso el direccionamiento sería
En el caso de q nuestra imagen se encontraría en otra carpeta dentro de esta carpeta debemos caminar por ellas de la misma manera ejemplo
Imagen fuera de la carpeta del archivo .html
En esta situación saldremos de la carpeta en la q nos encontramos usando ".." y luego caminaremos por las distintas ubicaciones como vimos anteriormente
Así la dirección sería
Al igual q en el caso anterior si debemos salir de varias carpetas lo seguimos haciendo con ".."
Sobre enlaces veremos como enlazar una página de nuestro sitio, como enlazar un sitio externo, hablaremos de anclas y como linkear un mail q nos puede servir como contacto.
Los enlaces se describen entre tag "a" estos enlaces peden ser una palabra "link 1" puede ser una imagen o cualquier otra estructura q coloquemos entre este tag y cuya dirección a enlazar o podria decirse cuyo destino, es lo q definiremos con la propiedad "href" el valor q toma esta propiedad es una dirección ya sea de la página del sitio q queremos linkear o del sitio externo, la única diferencia es q si queremos ir a un sitio externo debemos usar su dirección absoluta o sea con http:// y todo lo demás, en cambio si queremos ir a una página dentro de nuestro sitio solo usaremos un direccionamiento relativo. Como siempre un ejemplo q aclara más las cosas.
Para generar un ancla usamos "name" en el lugar de nuestro sitio donde queremos crear el ancla, y luego para linkear la misma usamos como siempre "href", se estableció q el nombre del ancla debe comenzar con "#", código sobre anclas..
Por último para enlazar una dirección de mail usamos "mailto" seguido de la dirección de mail como valor de nuestro "href".
En próximas entradas veremos listas y por último formularios, para así poder hacer un resumen mostrando la aplicación de todo lo aprendido hasta aquí...
El tag "img" nos brinda la posibilidad de incluir imágenes ya sean png, jpg, gif es muy sencilla su aplicación, simplemente colocamos la dirección de la misma como valor de la propiedad "src" de este tag, podemos configurar el alto y ancho con "height" y "width" respectivamente, podemos flotarla con la propiedad "float" q admite "left y right", agregarle una descripción q aparecerá si hay algún problema al cargar la imagen con la propiedad "alt" y un titulo o referencia de la imagen q aparecerá al pasar con el mouse con la propiedad "title". Veamos un ejemplo q aclara más el uso y la aplicación de las distintas opciones.
Uno de los problemas más comunes al trabajar con imágenes se dá con el direccionamiento de las mismas, esto es, creemos q la dirección q colocamos en el "src" es la correcta pero al cargar nuestra página no vemos las imágenes, bueno entonces cómo debemos trabajar para evitar problemas de este tipo:
-Lo principal es usar direcciones relativas y no absolutas, esto es direccionar desde la posición actual y no colocando toda la ubicación, estos son ejemplos de distintas direcciones.
Pero porq no usar direcciones absolutas? simplemente por el echo de q puede cambiarse la ubicación de nuestros archivos q conforman la página y de esta forma las imágenes no serán encontradas por el navegador, al subir nuestra web a un host si trabajamos usando direcciones absolutas no nos funcionará correctamente.
-Debemos tener bien claro el arbol q conforma nuestra web, o sea todos los archivos involucrados en la misma, para poder apuntar correctamente las imágenes. Recomiendo para q el trabajo sea más ordenado usar carpetas donde colocaremos los archivos necesarios y así de esta manera sean de fácil ubicación. Un ejemplo sería algo como esto.
-Se pueden dar varios casos, q la imagen se encuentre en la misma carpeta q el archivo ".html" q la esta llamando, q la imagen se encuentre dentro de una carpeta, o q se encuentre fuera de la carpeta, según esto vamos a trazar la dirección de la imagen de la siguiente manera:
Imagen dentro de la misma carpeta q el archivo html q la llama
Es el caso mas simple, su direccionamiento sería directamente
Aclaramos q el nombre debe estar acompañado del tipo de imagen, si colocamos un tipo equivocado no será encontrada la misma.
Imagen dentro de una carpeta
En este caso tendremos q ingresar a la carpeta correspondiente y recien llamar a la imagen. En este caso el direccionamiento sería
En el caso de q nuestra imagen se encontraría en otra carpeta dentro de esta carpeta debemos caminar por ellas de la misma manera ejemplo
Imagen fuera de la carpeta del archivo .html
En esta situación saldremos de la carpeta en la q nos encontramos usando ".." y luego caminaremos por las distintas ubicaciones como vimos anteriormente
Así la dirección sería
Al igual q en el caso anterior si debemos salir de varias carpetas lo seguimos haciendo con ".."
Sobre enlaces veremos como enlazar una página de nuestro sitio, como enlazar un sitio externo, hablaremos de anclas y como linkear un mail q nos puede servir como contacto.
Los enlaces se describen entre tag "a" estos enlaces peden ser una palabra "link 1" puede ser una imagen o cualquier otra estructura q coloquemos entre este tag y cuya dirección a enlazar o podria decirse cuyo destino, es lo q definiremos con la propiedad "href" el valor q toma esta propiedad es una dirección ya sea de la página del sitio q queremos linkear o del sitio externo, la única diferencia es q si queremos ir a un sitio externo debemos usar su dirección absoluta o sea con http:// y todo lo demás, en cambio si queremos ir a una página dentro de nuestro sitio solo usaremos un direccionamiento relativo. Como siempre un ejemplo q aclara más las cosas.
Para generar un ancla usamos "name" en el lugar de nuestro sitio donde queremos crear el ancla, y luego para linkear la misma usamos como siempre "href", se estableció q el nombre del ancla debe comenzar con "#", código sobre anclas..
Por último para enlazar una dirección de mail usamos "mailto" seguido de la dirección de mail como valor de nuestro "href".
En próximas entradas veremos listas y por último formularios, para así poder hacer un resumen mostrando la aplicación de todo lo aprendido hasta aquí...
Comentarios
Publicar un comentario