Consejos útiles

Imágenes HTML: una hoja de trucos para principiantes

Pin
Send
Share
Send
Send


La última vez que miramos la opción de retiro. imágenes de una carpeta en PHP.

Del ejemplo anterior, nos dimos cuenta de que la imagen se muestra en la página usando etiquetas HTML.
Y las dimensiones de la imagen, nos registramos directamente en el código HTML.

Ahora te mostraré cómo configurar el tamaño de la imagen usando la hoja de estilo. Todos estos datos se colocarán en un archivo separado con la extensión css y lo nombrarán como un ejemplo de style.css.

Las dimensiones de la imagen se establecen mediante los parámetros ancho y alto.
Para establecer las dimensiones de la imagen y registrarla a través del archivo CSS, debe crear una clase para la etiqueta src. Por ejemplo, escribe>

Luego, en el archivo CSS, las dimensiones se escribirán de esta manera

Con esta opción de grabación, si la altura real de la imagen es superior a 170 píxeles, por ejemplo, 400 píxeles, se mostrará una imagen distorsionada en la página. Será aplanado.

Para evitar esto, puede establecer solo un parámetro, el ancho de la imagen, la altura predeterminada se establecerá sin violar automáticamente las proporciones de la imagen:

De la misma manera, puede establecer la altura, luego el ancho se establecerá automáticamente manteniendo las proporciones de la imagen.

Si queremos ver el tamaño real de la imagen, entonces no es necesario especificar el tamaño de la imagen en el archivo. Solo si sabemos aproximadamente que el tamaño de la imagen ocupa toda la página, entonces no debería haber ninguna etiqueta en la página que especifique el tamaño.

Por ejemplo, una mesa

o bloquear div

Si queremos que la imagen ocupe todo el ancho de la página del navegador o todo el ancho de la columna del sitio, entonces el ancho debe especificarse en porcentaje.

De esta manera:

En este ejemplo, analizamos la opción de establecer tamaños de imagen usando css. Pero, de hecho, con la ayuda del archivo css, todos los parámetros se configuran para el diseño de todo el sitio. Contiene todos los parámetros para tamaños, apariencia, para todos los elementos del menú, etc.

Para los diseñadores web, es una mala forma si los estilos se atribuyen en formato HTML. Solo las clases y la identificación de cada elemento se registran en la plantilla. Y todos los estilos se extraen en un archivo css separado.

Además, si desea crear un diseño sorprendentemente hermoso y único de su sitio, no puede prescindir de una imagen de fondo. ¿Cómo sin eso? Cómo hacerlo se describe en esta sección, y dónde ubicar la imagen de fondo se puede encontrar aquí.

Y si tiene alguna opinión sobre el formulario de comentarios de lectura a continuación.

¿Cómo incrustar una imagen en HTML?

Para insertar una imagen en una página HTML, se usa una sola etiqueta simple:

donde xxx es la dirección de la imagen. En el caso de que la imagen esté en el mismo directorio que la página, la etiqueta se verá así:

Sin embargo, el acceso a Internet estable y de alta velocidad aún no ha llegado a todos los rincones del mundo, y sucede que la imagen en el sitio web simplemente no se carga. Para tales casos, existe el concepto de texto alternativo.

Se muestra en el sitio de la imagen en el momento de su inaccesibilidad, carga o en el modo de navegador "sin imágenes". Se agrega usando el atributo alt de la etiqueta.

Un ejemplo de agregar texto alternativo a un archivo de imagen:

Tamaño de imagen HTML

Para cambiar el tamaño de visualización de un archivo de imagen, use las etiquetas de alto y ancho, donde alto es el alto y ancho es el ancho, medido en píxeles.

Al usar estos atributos, el navegador primero asigna espacio para el contenido gráfico, prepara un diseño de página general, muestra el texto y luego carga la imagen.

La imagen se coloca en un rectángulo con los tamaños dados, y en el caso de que los parámetros sean más pequeños o más grandes que el original, la imagen se estira o comprime.

Si no se utilizan los atributos de alto y ancho, el navegador carga la imagen inmediatamente, retrasando la visualización de texto y otros elementos de la página.

Estos parámetros se pueden especificar tanto en píxeles (el tamaño de la imagen es constante y no depende de la resolución de la pantalla del usuario) como en porcentaje (el tamaño de la imagen depende de la resolución de la pantalla).

Debe recordarse que en el momento en que cambia el tamaño original de la imagen, debe mantener sus proporciones.

Para hacer esto, solo especifique el valor de solo uno de los parámetros (ancho o alto), y el valor del segundo se calculará automáticamente.

Diseño de imagen HTML

Al igual que con muchas etiquetas HTML,

Enlace de imagen

En HTML, para crear un enlace, use la etiqueta:

Para establecer un enlace gráfico, solo necesita combinar la etiqueta de imagen con la etiqueta de enlace.

Esto se hace de la siguiente manera:

Como puede ver, la inserción gráfica puede ser un enlace y redirigir a cualquier dirección registrada en versión completa o abreviada cuando se hace clic.

¿Cómo puedo hacer que una imagen sea un fondo en HTML?

La imagen no solo se puede insertar en la página como un objeto visible, sino que también se puede establecer como fondo. Para definir una imagen como fondo, es necesario especificar el atributo background = "xxx" en la etiqueta, donde xxx es la dirección de la imagen especificada de la misma manera que en los ejemplos anteriores.

Por ejemplo, estableceremos una imagen de textura como imagen de fondo:

Esta información sobre las etiquetas y los atributos necesarios para insertar la imagen en la página HTML del sitio se ha agotado.

Pin
Send
Share
Send
Send