¿Cómo añadir imágenes a su página web en el pi frambuesa

Video: como hacer tu pagina web con html como poner imagen de fondo y muchas cosas mas

Adición de imágenes es una gran manera de darle vida a una página web con la Frambuesa Pi y le ayudará a transmitir su mensaje. Por ejemplo, mira a las dos imágenes en esta página: una gran foto panorámica como un banner en la parte superior para darle al sitio una identidad visual, y una foto tomada en un viaje.

Video: Poner fondo de imagen a una pagina en HTML

Para añadir una imagen a su página web, insertar una etiqueta en su documento HTML que indica al navegador dónde encontrar la imagen y lo que es su nombre de archivo. También es necesario decir que lo grande que es y proporcionar una breve descripción de la misma. Aquí está la etiqueta de imagen para la imagen de la bandera:

Esta etiqueta se ve un poco más complicado que los otros que ha utilizado hasta ahora, ya que contiene información adicional, pero no es tan compleja cuando se descomponen.

La información adicional está formateado con una palabra corta que explica qué tipo de información es, un signo igual, y luego la propia información entre comillas dobles. piezas adicionales de información como esta en una etiqueta HTML se conocen como atributos. Los atributos en la etiqueta de la imagen son

• src: Esta es la abreviatura de fuente y le dice al navegador qué imagen utilizar, y donde pueda encontrarlo. Si la imagen está en la misma carpeta que el archivo HTML, puede poner el nombre del archivo sólo aquí, y si es en una carpeta por encima de la carpeta actual, puede utilizar la fuente ../banner.jpg.

  También puede poner un enlace a una imagen en la web, si usted incluye su dirección de sitio web, a partir de http: //- por ejemplo, http://example.com/testimage.jpg. Usted debe evitar el uso de imágenes de las páginas web de otros sin permiso, sin embargo, ya que roba su ancho de banda (que podría tener que pagar extra para servir a la imagen a sus visitantes) y es una violación de los derechos de autor.

• anchura: Esto le dice al navegador cómo amplia la imagen se debe mostrar en la pantalla, medida en píxeles. UN pixel es el punto más pequeño que la pantalla puede mostrar, y usted desarrollar un instinto para el tamaño adecuado para usar las imágenes a medida que construye sitios. Una resolución de la pantalla común es 1024 × 768, que significa que hay 1024 píxeles horizontalmente y 768 píxeles verticales.

  Si el archivo de imagen es más ancho o más delgado que el tamaño especificado en el etiqueta, el navegador cambia el tamaño de la imagen. Usted debe evitar el uso de archivos de imágenes que son más grandes que su tamaño de pantalla, sin embargo, ya que el navegador todavía tiene que descargar toda la imagen y que puede ralentizar su sitio web. Tener especial cuidado con las fotos de su cámara digital, que puede ser enorme.

• altura: Esto le dice al navegador cómo altura de la imagen debe estar en la pantalla, medida en píxeles. Una vez más, se redimensiona por el navegador si es necesario.

• alt: Esta es la abreviatura de Texto alternativo y proporciona una breve descripción de la imagen que se utiliza si la imagen no se puede mostrar u visto por cualquier motivo. Ayuda a los usuarios de Internet con discapacidad visual para entender el contenido visual, ayuda a los motores de búsqueda para entender lo que las imágenes contienen, y también ayuda a las personas con los equipos más lentos, como el Raspberry Pi.

  Alguien con el navegador Dillo, por ejemplo, podría apagar las imágenes para acelerar su navegación. Sólo ven el texto alternativo que nos ha facilitado para cada uno en su lugar. buena escritura alt texto es una forma de arte en sí mismo, pero la clave no es tratar de describir la imagen, sino para tratar de transmitir su significado en su lugar.

  Por ejemplo, está bien decir “logotipo de Google” sin tener que describir lo que parece. El texto alternativo sólo se muestra cuando las imágenes no están disponibles, por lo que no debe contener ninguna información adicional no en la imagen. Mantener su alt texto corto: Recuerde que en algunos casos va a ser leído en voz alta por un lector de pantalla, imágenes y rara vez son el contenido más importante en la página.

Las imágenes pueden ser lentos para descargar, por lo que usarlos con moderación. Es mejor utilizar unas fotos bien elegidos que le ayudan a contar su historia, que a salpicar los ojos dulces decorativos en todas partes. Imágenes que se cargan casi instantáneamente desde la tarjeta SD en su Frambuesa Pi podrían tomar mucho tiempo para descargar a través de Internet cuando su sitio web va en vivo. Sólo .jpg y las imágenes en formato .jpg funcionan de forma fiable en todos los navegadores.

Si es necesario utilizar la misma imagen en diferentes páginas web, reutilice el src parte de su etiqueta de imagen. Si vuelve a utilizar exactamente la misma copia de una imagen, el navegador del usuario descarga la imagen de la primera vez, y luego se reutiliza sin necesidad de descargar de nuevo el segundo tiempo.

Video: Tutoriales HTML5 + CSS3 - 17 Imagenes de Fondo

Eso puede hacer que su sitio web mucho más rápido, especialmente si usted tiene logotipos u otras características de diseño que aparecen en cada página. También ahorra espacio en el servidor si sólo está almacenando una copia de cada imagen.