In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn’t too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. In this article we’ll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to CSS background images.
How do we put an image on a webpage?In order to put a simple image on a webpage, we use the <img> element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source). The src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL, in the same way as href attribute values in <a> elements.
Puedes añadir imágenes a tu sitio web y a páginas individuales mientras desarrollas el sitio web. También puede permitir que los usuarios suban imágenes, lo que puede ser útil para tareas como permitirles añadir una foto de perfil.
El procedimiento de esta sección muestra cómo mostrar una imagen sobre la marcha en la que los usuarios especifican el nombre del archivo de la imagen de una lista de nombres de imágenes. Seleccionan el nombre de la imagen en una lista desplegable y, cuando envían la página, se muestra la imagen que han seleccionado.
El ejemplo anterior mostraba cómo mostrar una imagen dinámicamente, pero sólo funcionaba con imágenes que ya estaban en su sitio web. Este procedimiento muestra cómo permitir a los usuarios cargar una imagen, que luego se muestra en la página. En ASP.NET, puede manipular imágenes sobre la marcha utilizando el ayudante WebImage, que tiene métodos que le permiten crear, manipular y guardar imágenes. El ayudante WebImage soporta todos los tipos de archivos de imagen web más comunes, incluyendo .jpg, .png y .bmp. A lo largo de este artículo, usarás imágenes .jpg, pero puedes usar cualquiera de los tipos de imágenes.
El atributo background que especificamos en la etiqueta <body> no está soportado en HTML5. Utilizando las propiedades CSS, también podemos añadir una imagen de fondo en una página web. Más adelante, veremos diferentes propiedades CSS con las que podemos cambiar el aspecto de la página web. Propiedad CSS background-imageEn todos los ejemplos, definiremos el código CSS dentro de la etiqueta <style>. También veremos cómo dirigir la etiqueta div y la clase usando CSS. En el siguiente ejemplo, estamos especificando la propiedad CSS background-image y background-color que establecerá la imagen de fondo y la propiedad de fondo para el cuerpo HTML respectivamente.
Notas:Ahora, antes de entender cómo podemos utilizar los diferentes valores de las propiedades CSS, vamos a ver la lista de valores de las propiedades CSS asociadas a la imagen de fondo.Siguiendo con este artículo sobre Imagen de fondo en HTMLAhora vamos a ejecutar algunos de los ejemplos para entender cómo utilizar los valores de las propiedades CSS. Repetición de fondoAquí estamos tratando de añadir un par de imágenes de fondo en el que la primera imagen aparecerá sólo una vez y la segunda imagen se repetirá. Para ello utilizamos background-repeat.
¿Cómo puedo convertir un JPG a HTML? Aunque no es una pregunta habitual, es posible que necesites convertir JPG a HTML para poder añadir el contenido de la foto JPG a tu sitio web. Si tienes este problema y buscas una forma fácil de convertir JPG o JPEG a HTML con un clic, los siguientes métodos te serán muy útiles.
Utiliza la etiqueta de la imagen y la URL específica donde se almacena la foto, así: img scr=”URL del archivo JPG”. Pon el código de la imagen donde quieras y el archivo JPG se incrustará en el documento HTML. La imagen se mostrará una vez que el usuario abra ese documento en un navegador web.
Puedes ajustar el ancho de la imagen a como quieras que aparezca con el código HTML. Sólo tiene que añadir la anchura al código img. Por ejemplo: . De este modo, se ampliará o reducirá el ancho actual de la imagen a 400 píxeles.
HTML es en realidad un lenguaje. La palabra clave HTML significa HyperText Markup Language. Hay muchos editores que se pueden utilizar para modificar el lenguaje de la forma que más convenga al usuario. El Bloc de notas es el editor de HTML más común y completo que se puede utilizar para editar el lenguaje según se requiera. Los pasos que hay que seguir en este sentido son muy simples de seguir. Se mencionan a continuación para que los usuarios los entiendan rápidamente.