Imagen de fondo html
¿Ha oído alguna vez que la gente sólo recuerda el 20% de lo que lee, pero el 80% de lo que ve? Aunque los porcentajes exactos son objeto de debate, la idea básica no lo es: a la gente le resulta fácil aprender y procesar la información visualmente.
Por eso la mayoría de los sitios web utilizan imágenes, y por eso es importante incluir imágenes en su propio sitio. Las imágenes ayudan a que su contenido sea más informativo, atractivo y memorable. Además de mejorar la experiencia del visitante, también pueden ayudar a aumentar el tráfico de búsqueda orgánica.
Si utiliza una plataforma de creación de sitios web como CMS Hub o WordPress, sólo tiene que hacer clic en el icono de la imagen en su barra de herramientas, seleccionar una imagen de su gestor de archivos e insertarla. Si no utilizas un constructor, puedes añadir fácilmente imágenes a tu sitio web. Sólo necesitas saber algo de HTML. Veamos el proceso a continuación.
El elemento HTML imagen es un “elemento vacío”, lo que significa que no tiene una etiqueta de cierre. A diferencia de los elementos como el párrafo, que consisten en una etiqueta de apertura y otra de cierre con contenido en medio, una imagen especifica su contenido con atributos en la etiqueta de apertura.
Html img src
Las imágenes forman parte integral de un sitio web al proporcionar un contexto adicional a los visitantes del sitio. Aunque existe una gran variedad de formatos de archivo gráfico, los formatos de archivo GIF, JPEG y PNG se utilizan habitualmente en las páginas web. Los formatos de archivo GIF y JPEG son compatibles con las páginas web y pueden verse en la mayoría de los navegadores. El siguiente texto ofrece más información sobre estos formatos de archivo:
GIF (Graphic Interchange Format) – Los archivos GIF utilizan un máximo de 256 colores y son los mejores para mostrar imágenes de tonos no continuos. Los archivos GIF son ideales para mostrar grandes áreas de colores planos, como barras de navegación, botones, iconos, logotipos u otras imágenes con colores y tonos uniformes.
JPEG (Joint Photographic Experts Group) – El formato de archivo JPEG es el mejor para las imágenes fotográficas o de tono continuo, porque los archivos JPEG pueden contener millones de colores. A medida que la calidad de un archivo JPEG aumenta, también lo hace el tamaño del archivo y el tiempo de descarga del mismo. Puedes conseguir un buen equilibrio entre la calidad de la imagen y el tamaño del archivo comprimiendo un archivo JPEG.
意見回饋
Images can be easily inserted at any section in an HTML page. To insert image in an HTML page, use the <img> tags. It is an empty tag, containing only attributes since the closing tag is not required.Just keep in mind that you should use the <img> tag inside <body>…</body> tag. The src attribute is used to add the image source i.e. URL of the image. The alt attribute is for adding alternate text, width for adding width, and height for adding the height of the image.ExampleYou can try the following code to insert an image in an HTML page −<!DOCTYPE html>
Imagen Html
Before we continue, I encourage you to follow along by copying and pasting today’s code into your own HTML document (or the page we created in Lesson 2: How To Create and Save Your First HTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This will greatly enhance your learning ability.
Let’s analyze this code. First, <img> is the code for creating an image element. Next, the letters “src” are used as an attribute (which you learned about in Lesson 3: Attributes and Values) and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your HTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:
As you can see, in both code examples so far there has not been an ending </img> tag, because the image code is a “self closing” element. This is because unlike a paragraph, we won’t have a plethora of content inside our <img> element, but rather a single image. In fact, HTML5 does not require us to ever “close” our elements, but for organizational reasons I recommend including traditional closing tags for most elements.