| |
|---|
El empleo de la etiqueta |
| |
|---|
|
atributo, imagen, presentación |
| |
|---|
| Aprender cómo insertar imágenes simples en HTML estudiando sus elementos constitutivos; la relación de las imágenes HTML con las imágenes de fondo de CSS es tema de otra lección. |
Portafolio de temas tratados en esta publicación |
|---|
⏫ Ir al Portafolio ⏫
En un principio, la web mostraba en sus publicaciones únicamente texto y como resultaba obvio,
con tal limitación era visto como algo tedioso. Afortunadamente, en un tiempo relativamente breve se logró que se añadieran elementos multimedia que incidieron en lo atinente a la vistosidad en el contenido, tal como la capacidad de insertar imágenes en las páginas web(y otros tipos de contenido más interesantes); la imagen de la izquierda es una manera muy pictórica de complementar este párrafo y con ello capturar el interés del lector, donde además de la imagen en si misma, entran en juego otros elementos, como por ejemplo el borde punteado e incluso el mensaje que sale al colocar el pulsor sobre la imagen. Estos y otros truquitos son los que precisamente se comentarán en esta publicación.✅
⏫ Ir al Portafolio ⏫
Para incrustar una imagen simple en una publicación de unapágina web, recurrimos al empleo de una etiqueta básica definida como <img> y que como inicio idescriptivo, se puede decir lo siguiente:
Los elementos como <img> y <video> a veces se denominan elementos reemplazados. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video), no en el contenido del elemento en sí.✅
Podemos agregar imágenes no sólo de nuestro servidor, con una ruta relativa, sino que también podemos hacerlo con una absoluta. En este caso vamos a la suite de Google imágenes, copiando el link de la imagen que nos guste (clic derecho sobre la imagen yluego clic en copiar dirección de la imagen), colocándolo en el SRC de la imagen, o también podemos bajar esa imagen que nos gusta a un archivo creado para el alojamiento de imágenes, desde donde subiremos las que nos hagan falta para nuestros trabajos.✅
⏫ Ir al Portafolio ⏫
Esta sección de la publicación es para comentar los elementos constitutivos de una imagen, y conocer su funcionalidad. ✅
Es importante tener conocimiento de esos elementos, y muy particularmente de cómo podemos modificarlos según las necesidades de nuestro post: dónde lo vamos a ubicar, dimensiones, etc. ✅
⏫ Ir al Portafolio ⏫
El atributo src
El atributo “src” es imprescindible para poder incrustar una imagen en una publicación. Este atributo contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento contiene los valores del atributo href.✅
Se escribe así: <img src=”x”>, siendo “x” la dirección o la url dónde se encuentra situada la foto.✅
⏫ Ir al Portafolio ⏫
Alineación:
¿Cómo hacer para colocar la imagen a la derecha. o izquierda, del texto, o incluso centrada?. Esto es posible ya que la foto podemos alinearla en la página a nuestro gusto mediante “align“, utilizando los atributos “left” para alinearla a la izquierda, “right” para alinearla a la derecha, “top” para alinearla arriba, “bottom” para alinearla abajo y “middle” para alinearla al centro.✅
⏫ Ir al Portafolio ⏫
Atributo ALT:
También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo “alt” y lo escribiríamos de la siguiente manera: alt= “x”, siendo “x” la descripción que le gente leerá al pasar el ratón por encima. Este atributo es opcional pero lo recomendable es colocarlo siempre, y más abajo lo aclaro. ✅
La funcionalidad de este atributo es que nos permite agregar un texto. Este texto lo que hace es que le va a servir tanto al buscador, como al usuario, por si hay algún problema tanto con la conexión o si nosotros mismos tenemos problemas con nuestra imagen, ¿cómo así?. ✅
Si por ejemplo en la ruta de nuestra imagen hay algún error, o hemos cometido nosotros algún error en la modificación de los datos originales, obviamente que el navegador no va a encontrar ninguna imagen y lo que va a pasar es que no nos va a mostrar sino el texto. En la imagen que usé de ejemplo más abajo, intencionalmente eliminé el cierre de paréntesis de style, originando un error y el navegador verá lo que ya mencioné en este pàrrafo, que es lo siguiente:
Si un navegador no puede encontrar una imagen, mostrará el valor del alt atributo
De manera que este texto siempre se va a mostrar cuando el navegador no encuentra la imagen, cuando haya algún problema con la ruta.✅
Es importante agregar este atributo porque cuenta mucho para que Google te ponga tu imagen de manera que contribuye a posicionar mejor tu página. ✅
Hay que aclarar que no con todos los navegadores podemos ver el “alt” de manera visual. Hay algunos que no lo representan.✅
⏫ Ir al Portafolio ⏫
Atributo Title
Su función es dar una breve descripción de lo que es la imagen. Cuando el usuario pone el pulsor sobre la imagen, sale un pequeño cuadro con la leyenda que colocaste en title.✅
⏫ Ir al Portafolio ⏫
Dimensiones de la imagen:
Atributos opcionales pero muy recomendables, son el height y el width, porque nos permiten resolver el problema de asignarle a nuestra imagen las dimensiones de anchura y altura que más nos interesa. ✅
El height define la altura de la imagen, mientras que el width define la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen. ✅
Puedes modificar ambos atributos a la vez, no obstante, si por ejemplo modificas solamente el width, ocurrirá que el height se coloca automñaticamente, y lo mismo viceversa. Es decir, puedes modificar cualquiera de los dos atributos, y el otro se mantiene igual. ✅
Nota: especifique siempre el ancho y el alto de una imagen. Si no se especifican el ancho y el alto, la página web puede parpadear mientras se carga la imagen. ✅
⏫ Ir al Portafolio ⏫
Atributo Border:
Y por último, te comento que le puedes adjudicar un borde específico al modelo que selecciones para ilustrar tu publicación, que bien puede ser una fotografía, imagen o caricatura según sea tu estilo particular de concebir el diseño gráfico, o por supuesto, según sean los requerimientos de tu cliente o de las particularidaes propias de la publicación en sí misma. El atributo que probablemente ya te lo sabes, se le conoce en HTML con el concepto: “border“. ✅
Y, cuando hablo de borde específico, me refiero a eso precisamente, o sea, puedes "especificar" cómo quieres que se vea tu borde, en cuanto a grosor, color y tipo...¡ maravilloso verdad! Es que representa una oportunidad fantástica en términos de mejoramiento de acabado, el poder incidir en los tres elementos anatómicos del border que son:
Por defecto, las imágenes que bajas de internet vienen con border 0 (Cero), pero, al modificar el borde añadiendo un style, puedes dar un mejor acabado (ACLARO: ESTO ACTUALMENTE SE TRABAJA POR CSS, LO CUAL EXPLICO EN LA PUBLICACIÓN QUE ESTOY PREPARANDO PARA TAL PROPÓSITO). ✅
Además, puedes también asignar a tu imagen cualquier tipo de borde llamativo, de los que existen y que te los identifico e ilustro en la sección Aplicación. ✅
Después solo tendrás que definir los siguientes elementos del border, es decir, definir el color y cuál quieres que sea el grosor del borde. ✅
⏫ Ir al Portafolio ⏫
Aplicación:
| |
|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium vulputate sapien |
Visualicemos el código, para que puedas destacar todos los elementos de la imagen arriba mencionados. Acá el codigo usado en esa imagen:
Comentemos el papel de los elementos de una imagen en la expuesta como ejemplo: ✅
El atributo ALT: Esta imagen está identificada como «IMAGEN DE EJEMPLO (1)» y, si alguien quiere bajarla a su archivo de imágenes es precisamente ese el nombre que aparecerá. El procedimiento es como se explica de seguido:
En un capture de pantalla te ilustro cómo se ve esa operación:
De hecho, otra forma de comprobar cómo aparece el Alt es DE LA FORMA QUE TE DETALLO SEGUIDAMENTE:
- dando click derecho sobre la imagen
- aparece el cuadro subsiguiente a esta breve descripción, luego click donde dice «COPIAR DIRECCIÖN DE ENLACE»
- y por último montas ese SRC sobre el SRC de una imagen receptora; de esta forma sustituyes la imagen receptora por la imagen que te copias.
La nueva imagen (o más bien la imagen reformada) tendrá entonces la siguiente dirección: src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjccywXz-X1ofhI8fjjQxSLv1mdTqCgZbROoDF27UqpS-JXRpPBwjo8sZkx_LrEPAudmNzRyWtAW77VrSN9fUJrH-IlNNJLw1mf8zwUA4bpN35x_DzyuP1IPpkc0fQXKR34BAZLnSGiSxY/s0/IMAGEN+DE+EJEMPLO.PNG" que como te das cuenta es la resultante de colocar en el entrecomillado de la src receptora la dirección que copiaste según ya te expliqué, y que para efectos metodológicos he destacado con un subrayado y color morado. ✅
Pero, ¿Cómo resuelves si la imagen que quieres bajar está bloqueada?. Pues, te lo comento en la publicación que hice para explicar tal operación, y no alargar este post con un punto que es colateral a lo acá tratado. Click en: Mis apuntes sobre el capture de pantalla
Y te dirás, todo lo expuesto es ¡demasiado fácil!, y tal vez. muchos lectores ya lo saben, ¿cierto o falso?. Pero, te comento que en 2010 cuando comencé a trabajar los blogs, estas metodologías las aprendí por lectura de blogs, que bondadosamente brindaron ese conocimiento para quienes como yo, avanzamos por estudio autodidacta,...¡dichosos los que lo han aprendido en cursos pagos o en asignaturas académicas!, que por cierto, ya es común en la actualidad, enseñar estas cosas a los niños en la mayoría de las escuelas. ✅
Atributo Title: Ya explicado con lujo de detalles, en ésta instancia corresponde ver su funcionalidad. También sencillísimo: colocas el ratón sobre la imagen y aparece el mensaje (en un botoncito color plata) asignado como TITLE; la imagen siguiente ilustra el efecto: ✅
Pues bien, en su "anatomía interna" la imagen introductoria de esta publicación con la siempre famosa Mafaldita le sustituí el border="0" por el siguiente style="border: 5px solid pink; margin-left: 3em; margin-bottom: Oem; margin-right: 1em;" con los tres elementos que configuran la anatomía de un border. ✅
Al apreciar los tres elementos "anatómicos" en ese border, te comento su significado:
- El 5px, que define el GROSOR (en pixeles) del borde
- El SOLID que define el TIPO de borde
- El pink que define el COLOR rosado aplicado al borde.
Pero, tal como lo cité en párrafos atrás, existen otros tipos de border. En cada una de las imágenes que ilustran este post, te los ilustro con diferentes colores, para que veas su aspecto, y pienso que se explican por sí mismas de esa manera. ✅
Así las cosas, respecto a la segunda imagen, cuyo borde es azul, se le aplicó un border distinto, que se le denomina DASHED. Con el mismo procedimiento te doy a conocer los otros tipos de border, en los párrafos que siguen. ✅
El borde denominado DOUBLE se le aplicò a la imagen con borde naranja. ✅
El siguiente borde, denominado INSET se le aplicò a la imagen de ejemplo principal, y exhibe un borde rojo. Obsérvese el efecto a los lados laterales. ✅
El borde denominado GROOVE se le aplicò a la imagen con borde amarillo. Obsérvese el efecto a los lados laterales. ✅
El borde denominado DOTTED se le aplicò a la imagen con borde morado. ✅
El borde denominado RIDGE se le aplicò a la imagen con borde marrón. ✅
El borde denominado OUTSET se le aplicò a la imagen con borde verde. ✅
Todo lo acá expuesto, lo asimilas practicando. De manera que en tu editor de textos, practica en una imagen modelo los diferentes elementos estudiados, y, define el border que te sea favorito, o analiza la conveniencia de su aplicación en función de la naturaleza del tema en que trabajas. Recuerda que trabajar con imágenes, constituye una función de mucha creatividad, y por tanto, aporta mucha satisfacción. ✅
Respecto al MARGIN que aparece en la definición del style, lo abordaré con el detalle que le corresponde en una publicación próxima a aparecer, luego de lo cual estaré colocando acá el enlace para redireccionar; de todas formas al dar click en la etiqueta margin tambiñen puedes llegar a esa próxima publicación. Por lo pronto, el margin es el espacio de relleno entre los lados de la imagen y el texto o contorno. ✅
Alineación(align): define la ubicación de la imagen en el texto: derecha o izquierda.
Dimensiones: Al revisar el HTML de la IMAGEN DE EJEMPLO encuentras:height="170" width="250" que consituyen, largo y ancho, respectivamente. ✅
El tema de las imágenes no se agota acá. Creo que he sondeado las muy diversas aristas de este tema. No obstante, desarrollaré muchos otros elementos cuando me ocupe de CSS, que por cierto, y como podrás comprobarlo en esa oportunidad, son muchos más elementos que hay que abordar. Estaré entonces suministrando el enlace. ✅
En mi forma muy personal de trabajar en la redacción de mis blogs, aparte de la sintaxis y la ortagrafía, completa el trinomio el elemento imagen, al cual concedo muchísima importancia, y por tanto la importancia que tiene para mí esta publicación. ✅
En virtud de lo anterior, y aunque no tiene que ver directamente con el tema de HTML y CSS, quiero sumar otro elemento más. Es referido a la edición de imágenes, tarea que se puede ejecutar con el auxilio de los muchos editores que puedes hallar en internet. Y sucede que también me he dedicado a compendiar esos editores, y, si te interesa el tema, te dejo los nombres de los blogs habilitados por mí para tal propósito, en los siguientes enlaces:
http://wwweditarimagenes.blogspot.com http://milediciones.blogspot.com http://lamemesmania.blogspot.comY como no me gustan los cabos sueltos, he tratado de incluir en este blog, todo lo que en alguna manera tenga relación, directa o indirecta, con los temas que abordo. Es el caso de los colores, que a los efectos de tomar decisiones en tus publicaciones, requieres del auxilio de tablas de colores y de conversores; pues bien, ese tema yo lo desarrollo en una publicación específica, por cierto, muy exhaustiva, por tanto, muy completa. y cuyo enlace suministro de seguido, y ¡por ahora! con ello culmino:
Mis apuntes sobre el atributo COLOR⏫ Ir al Portafolio ⏫
Les recomiendo de manera muy especial que puedan ver el video anexo, el cual es muy didàctico, sáquenle el mayor provecho posible, y si lo desean suscríbanse a ese canal. ✅
Videos:
Nota: Esta publicación es susceptible de agregación de modificaciones, según actualizaciones de contenido que arrojen mayor profundidad a los conceptos y definiciones acá compendiados de las fuentes consultadas citadas al pié de página.
⏫ Ir al Portafolio ⏫
Fuentes:
https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML https://www.hazunaweb.com/curso-de-html/imagenes/⏫ Ir al Portafolio ⏫
Complementario
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive https://forum.freecodecamp.org/t/make-an-image-responsive-why-is-display-block-necessary/291206/6 https://forum.freecodecamp.org/t/make-an-image-responsive-problems-with-display-block/209365 https://www.html.am/html-codes/textboxes/textbox-border.cfm
