17.10.2015

aún no

¡Hola a todos!
Seguimos estudiando los fundamentos de HTML.
En esta lección, diré y mostraré en los ejemplos, cómo hacer el fondo De color o imágenes en la página HTML.
¡Todo es bastante simple!
¡Vamos a empezar de color!
Creo que no se perdió, donde le dije cómo cambiar el color del texto y al final del artículo dio códigos de varios colores y tonos. ¿Por qué te recordé esta lección? Sí, porque hay una tabla con códigos de color listosizados, tómelos y practiquen inmediatamente en esta lección.
Entonces, cómo hacer un fondo de color en HTML ...

Fondo de color en html

El color del fondo en el documento HTML predeterminado. ¿Cómo preguntar color si lo desea?
Esto nos ayudará al atributo "BGCOLOR". Para pintar el fondo de la espalda, escriba este atributo a la etiqueta "Cuerpo":

Más o menos:

Aquí está el código HTML completo:

El texto de la página será verde y fondo negro.

El resultado será este:

Si desea hacer un fondo de la imagen, luego a la etiqueta "Cuerpo", registramos el atributo "Bacground":

Llene cualquier imagen donde su página web esté acostada (en el ejemplo, la página se llama "FON" con la extensión ".gif"):

Aquí está el código HTML completo:

El resultado será este:

Si la imagen de fondo se publica en la carpeta de las imágenes o en alguna otra carpeta, se verá así:

Aquí está el código HTML completo:

Texto de la página sobre un hermoso fondo.

¡Hoy es todo! Creo que la lección no fue complicada y todos entendieron. Si tiene preguntas, escriba en los comentarios.
Esperándote en las siguientes lecciones.

Publicación anterior
Poste siguiente

¡Buen día para todos para aprender y aprender algo nuevo! ¿Alguna vez has prestado atención a apariencia ¿Cuándo se desarrollan los cuales los creadores han sido perezosos para emitir un fondo de páginas? Y me di la vuelta. Se ve de matanza. A menudo debido a la falta de separaciones habituales entre especies diferentes La información que está mezclada y simplemente desaparece el deseo de ver más de este tipo de recurso web.

Para que tales problemas no sucedieron, decidí escribir un artículo sobre el tema: "Cómo hacer un fondo de páginas en HTML". Después de leer la publicación, aprenderá, con qué herramientas puede establecer el diseño de fondo, cómo hacer un fondo fijo o cambiarse y mucho más, lo que ayudará a que su sitio web sea atractivo. Ahora vamos a empezar!

Herramientas básicas para configurar las páginas web de fondo.

Para establecer la imagen de fondo, los desarrolladores de lenguaje web han proporcionado un fondo de atributo. Está disponible tanto en como en CSS.

En el lenguaje de marcado, este es el atributo de la etiqueta del cuerpo, y en las tablas de estilo - propiedad universalLo que le permite configurar hasta 5 características del plan trasero al mismo tiempo. El fondo es un elemento bastante flexible que se puede usar para tarea el fondo como un color, imagen en color o incluso animación.

Entonces, para instalar una imagen de fondo a través de una unidad HTML Suficiente para escribir este código: ...

Y en lugar de las palabras "Dirección de archivo" inserte la ruta a la imagen.

Sin embargo, aviso! Si en forma de fondo, desea ver un lienzo de monochón especificado de la paleta de colores, esto se realiza utilizando el atributo BGCOLOR.

Por ejemplo, ...

Preguntamos un fondo negro para nuestro sitio.

Los colores en CSS y HTML se establecen mediante una palabra en inglés (por ejemplo, roja) o un código especial que consiste en un número # y seis caracteres después de él (por ejemplo, # FFDAB9).

Al escribir una segunda opción en especializada. productos de software Para los desarrolladores, la paleta aparecerá automáticamente frente a usted. Si acaba de comenzar a aprender estos idiomas web, entonces el código de color puede ser spackeed en Internet.

Fondo como propiedad en mesas de estilo en cascada

Está establecido o en archivo separado con estilos CSS, o en el elemento

En esta nota, puede resumir nuestro trabajo. Únete a las filas de mis suscriptores fieles, haz preguntas si algo es incomprensible, y no hagas un enlace a mi blog, y compártelo con amigos. Te deseo un agradable aprendizaje. ¡Adiós!

Sinceramente, chuechev romano

Al configurar cualquier sitio, además de la funcionalidad, el diseño es muy importante. Esto es lo que pregunta su propio estilo y diseño de una empresa o persona, para la cual se crea el sitio. Personalice el color de fondo y su imagen no será laboral, siguiendo las instrucciones de este artículo.

Abre tu Archivo html. Para el libreta o cualquier otro editor de textoA lo que estás acostumbrado. Por ejemplo, tome una página primitiva del sitio con un mínimo de texto. Puede abrir su archivo usando cualquier navegador.

Para empezar, cambiar el color de su fondo, ya que las personas con conexiones de Internet lentas no podrán ver inmediatamente la imagen de fondo del sitio. Algún tiempo, hasta que la imagen esté cargada, solo pueden ver el color de su sitio.
Entrar en la etiqueta. El parámetro bgcolor \u003d "*****", donde ***** es un cifrado de color. Puedes aprender colores para HTML en cualquier editor gráficoAl seleccionar la opción "Para web", ya sea en el sitio https://colorscheme.ru/color-names

Tienes suficiente para elegir un color en la paleta del círculo y asigna su intensidad dentro del cuadrado. A la derecha verá dos códigos para HTML. Copiarlos e insertarlos en el cuaderno.

Con el color e insertándolo en el código, vea si hizo todo lo correcto, visualizando la página web recibida desde el navegador.

Ahora puedes pasar a la inserción de la imagen de fondo. Coloque la imagen deseada en la carpeta de códigos para mayor comodidad. Pregúntale el nombre de las letras latinas.

Ahora descubra la ubicación del archivo haciendo clic en él con el botón derecho del mouse seleccionando la cadena "Abrir con" y haciendo clic en cualquier navegador instalado en su computadora.

Copie la dirección de la barra de búsqueda de su navegador.

Ahora en la etiqueta Ingrese la cadena:

• estilo \u003d "Fondo-imagen: URL ('Archivo: /// C: / USSERS / POW_FILE.JPG')"

Guarde su archivo.

Revise su página web. Verá que el fondo está sustituido bajo su texto.

Tenga en cuenta que los usuarios que tienen una mayor resolución de pantalla, su imagen se duplicará hacia abajo y hacia la derecha. No se verá bien, si la imagen no es un monófonio. Para corregir este parámetro, hay comandos especiales.

• repetición de fondo: "valor". Las opciones para su valor pueden ser: "Repetir-X", repite su imagen de fondo y horizontalmente, y verticalmente. "Repetir-y" - repetir solo verticalmente. "No repetición": la imagen se congela en el lugar y no se repite. "Espacio" - Toda la página se llenará número máximo Copias de la imagen, el extremo se jactó. "Ronda", la misma opción, pero en los bordes de la imagen se reducirá cuidadosamente;
• accesorio de fondo: "valor". Si sustituye en lugar de la etiqueta de la palabra "Scroll", entonces la imagen se desplazó junto con el sitio. "Fijo", al desplazarse del fondo permanece sin cambios;
• tamaño de fondo: valor Valor2. Aquí los valores deben tomar la cantidad en píxeles. Por ejemplo: 100px 200px. Además de los píxeles, los valores son aceptados en porcentaje. Este es el parámetro de llenado de la imagen. Además de los números, puede ingresar dos parámetros: "contener": rellena en la página por la imagen a lo largo del lado largo y "cubierta": llena la página con la imagen de ancho.

Saber lo básico de llenar el fondo de la página en HTML está listo para crear su primer sitio.

En HTML, el fondo para el sitio no especifica, se escribe a través de los estilos CSS, pero es solo la formalidad teórica. Y ahora descubramos cómo se define este fondo.

Fondo para el sitio o bloque separado

Como para implementar este objetivo, necesitamos un archivo CSS, debe crearlo y conectarse a HTML. Esto está escrito en este artículo. Después de eso, puedes proceder a trabajar. Primero, debe decidir qué quiere establecer el fondo. Si toda la página es generalmente, entonces puedes hacerlo así:

Cuerpo (
Color de fondo: blanco;
}

Es decir, llamamos a la etiqueta del cuerpo, que representa toda la página. La propiedad de color de fondo se utiliza para especificar el color de fondo. Pero, ¿qué pasa si necesita establecer un dibujo como fondo, y no un color sólido? Luego vale la pena escribir así:

Cuerpo (
Imagen - Imagen: URL (camino a la imagen. Imagen de dibujo)
}

Para mayor claridad, propongo considerar todo en detalles sobre el ejemplo. Para hacer esto, usaré una imagen de este tipo:

Por ejemplo, imagen de fondo: URL (comp.png). En este ejemplo, le preguntamos una imagen de fondo con el nombre Comp (esto es exactamente lo que lo llamé) formato pngque se encuentra en la misma carpeta que el archivo CSS.
En HTML, cree un bloque arbitrario con dimensiones específicas para que sea demostrar el trabajo de las propiedades de CSS.

Y aquí para él estilos:

#Ct (
Imagen - Imagen: URL (comp.png);
Ancho: 600px;
Altura: 400px;
}

Eso es lo que hicimos:

¿Porqué es eso? El hecho es que, por defecto, el navegador repite la imagen tantas veces para llenar completamente el bloque. A veces es necesario, por ejemplo, cuando se usan adornos sin costuras, pero en nuestro caso debería haber una imagen. Afortunadamente, esto puede ser muy fácil de manejar.

Repitiendo fondo

Si tiene una foto como fondo, entonces de forma predeterminada se repetirá horizontal y verticalmente para llenar todo el espacio de la página. Para eliminarlo, la propiedad de repetición de fondo se usa y su valor sin repetición (no repetir). También hay valores:

• Repetir-x - repetir solo horizontalmente
• Repetir-y - solo verticalmente

Agrego a las propiedades de nuestro fondo gráfico:

Repetición de fondo: sin repetición;

Posición

La propiedad de posición de fondo determina el lugar donde será la imagen. Dos valores se establecen aquí: horizontal y vertical. Ejemplos: Posición de fondo: inferior derecha - Posición en la esquina inferior derecha, a la izquierda a la izquierda: en la parte superior inferior (y por defecto), 250px 500px - Desplazamiento de la izquierda esquina superior Derecho a 250 píxeles y hasta 500.

Veamos mejor en los ejemplos:

Posición de fondo: arriba a la derecha;

La imagen para moverse al borde superior derecho. También di un fondo amarillo para ser visible a sus bordes.

posición de fondo: 50% 50%;

La imagen apareció exactamente centrada en su bloque. Sí, esto también es posible gracias al porcentaje de la posición.

posición de fondo: 70% 20%;

El fondo se desplaza en un 70% horizontalmente, y 20 verticalmente.

También se permite en píxeles establecer un valor negativo de la posición. Es permisible hacerlo, por ejemplo, cuando usa un gran sprite de imagen y debe colocar la unidad la parte deseada de este sprite.

Fondo de fijación

Todavía me gusta mucho una propiedad llamada fondo de fondo. Solo tiene dos valores y el primero es el incumplimiento (desplazamiento). Esto significa que al desplazarse de la página, el fondo también se desplazó, y si usa una imagen sin repeticiones, luego, al final, terminará y luego va solo un color sólido.

Para que esto no suceda, el accesorio de fondo: se prescribe fijo y ahora nuestros antecedentes se fijan de manera confiable en su lugar. Esto se puede comparar con la forma en que el bloque define el posicionamiento fijo y no desaparecerá de la página al desplazarse.

Grabación abreviada de todo este bien.

Desmontamos muchas propiedades que le permiten hacer un fondo, pero si se usan todo, resulta un registro incómodo. Hay una solución muy elegante. La propiedad de fondo te permite escribir a través de los espacios. necesidad de ajustes en este orden:
Fondo: Posición de sujeción de la repetición de la imagen del color;
Y ahora todo se puede escribir así:

ANTECEDENTES: URL AMARILLO (comp.png) No-repetición 20% 100px;

Si alguna propiedad no es necesaria para determinar, entonces simplemente se reduce (en nuestro caso, no registramos el archivo adjunto).

Muchos fondos

¿Y si necesitas algunas fotos de fondo? Sucede que lo hagan. Hoy en día, CSS apoya tal oportunidad. Intentemos. Tomar un icono de este tipo

Llamé a su computadora portátil.

Y aquí está el código para insertar un multiphone:

Fondo: URL (comp.png) sin-repetición 20% 100px,
URL (laptop.png) sin repetición 50% 50%;
Color de fondo: amarillo;

Como puede ver, simplemente coloque la coma después de la primera imagen y prescriba la configuración para el segundo. El color sólido en este caso es mejor establecer por separado.

De la misma manera, puede grabar más imágenes, pero no exagere, demasiados gráficos no es muy bueno.

Eso es lo que quería terminar este artículo. Con el fondo, puedes hacer muchas cosas más interesantes, intentaré escribir sobre ellos en el futuro (y algo ya ha escrito, por ejemplo,). Exitoso para usted estudiar esta propiedad.

Establecer el color de fondo y / o una imagen para una página o un elemento separado es lo suficientemente simple. Lo principal es saber dónde y cómo se puede hacer, así como para tener un código de color y / o una imagen de fondo. Es posible que de este artículo aprenda muchas cosas nuevas, pero lo creé específicamente para principiantes. Por lo tanto, todo será lo más corto posible y en detalle simultáneamente. Lo principal es que no solo obtienes. vista general Y ejemplos preparados, pero también entendiendo cómo hacer un fondo en HTML.

Para establecer el fondo en HTML, use el DOCTYPE intermedio

Y comenzaré con el hecho de que Html5. No hay oportunidad de preguntar. Esta característica se decidió soportar en CSS. Por lo tanto, si planea usarlo a continuación, y desea obtener un código válido (correcto), debe permanecer en el tipo de transición de documento. Para hacer esto, su página web debe comenzar con la siguiente línea:

Transicional// es "" http://www.w3.org/tr/html4/loose.dtd "\u003e

Si lo descubriste, vamos a entender cómo se crea el fondo. Y se debe observar lo primero aquí, esta es la diferencia entre color de fondo y imagen de fondo. Al principio va color de fondoQue inundaciones todos los espacios de página disponibles o su elemento. La repetida en la parte superior imagen de fondo. Visualmente, esto se puede representar de la siguiente manera:

Fondo del documento HTML y sus elementos.

Lo segundo que necesitas saber es la diferencia entre cuerpo del documento y elemento del documento. Cuerpo del documento Se indica en el código HTML de la página web de la etiqueta del cuerpo, que incluye todo el contenido de la página web. Obviamente, el fondo del documento del documento no puede ser transparente. Si no se especifica el fondo del cuerpo del documento, se utiliza el valor predeterminado especificado en la configuración del navegador.

Elementos de la página están dentro de la etiqueta del cuerpo. Cabe destacar que puede configurar el color y / o la imagen de fondo utilizando HTML a todos los elementos del documento. Por ejemplo, la imagen de fondo se puede especificar solo para tablas. Por defecto, generalmente tienen un fondo transparente.

Atributo bgcolor para crear color de fondo

Para preguntar color de fondo El documento o sus elementos son utilizados por el atributo BGCOLOR, por ejemplo:

En este caso, establecemos el color de fondo para la página en su conjunto. Pero un ejemplo de cómo establecer el color de fondo para la mesa, en la etiqueta de la tabla:

Texto con fondo

Cabe destacar que el color de fondo en la tabla también se puede especificar para filas en la etiqueta TR y para sus celdas en TD TAG.

¿Cómo averiguar el código de color?

Probablemente ya hayas notado que el color en HTML está establecido en especial códigoPor ejemplo: # EC008C. Para saber el código que necesita el color, puede usar uno de los editores de gráficos. Por ejemplo, en Photoshop puedes usar " Herramienta cuentagotas."(Pipeteo) para obtener un color desde un punto en la imagen. Luego, debe hacer clic en el color resultante en la barra de herramientas y en la ventana que se abre " Selector de color"(Seleccionar color) Copiar código de color.

Llamo su atención sobre el hecho de que este código será sin un signo de celosía (#) al principio, este signo deberá agregarse manualmente.

También puedes usar numerosos servicios en línea, p.ej:

• etc.

Su principio de trabajo es aún más fácil: haga clic en el color deseado y obtenga el código de TI.

Atributo de fondo para crear una imagen de fondo.

Así como en el caso del color de fondo y en el caso de imagen de fondoNecesitas usar un atributo especial, a saber, fondo, por ejemplo:

En este caso, le pedimos la imagen de fondo para la página en su conjunto. Cabe destacar que debido a las limitaciones del tamaño de la imagen, se repetirá, por ejemplo:

Como ves, cuando la repetición, la transición entre las imágenes es notable. Por lo tanto, se usan imágenes especiales a menudo, donde se tiene en cuenta este momento.

Pero un ejemplo de cómo establecer una imagen de fondo para una mesa, en la etiqueta de la tabla:

Texto con fondo

Cabe destacar que la imagen de fondo se puede configurar solo para la tabla en su conjunto y / o su celda separada. Para una cadena no funcionará.

Camino absoluto y relativo a la imagen de fondo.

Por separado vale la pena prestar atención dIRECCIÓN Fondo de la imagen. En este caso, se utiliza la ruta relativa a la imagen, es decir, La dirección se indica en la ubicación del archivo de imagen al archivo de la página web. Esta opción no se puede llamar particularmente exitosa. Es mejor usar el camino absoluto a la imagen, es decir. su URL completa, p.ej:

En este caso, no tendrás problemas concomitantes. Para más información puedes leer.

Vamos a resumir

El uso de los atributos BGCOLOR y el fondo está moralmente desactualizado, porque para la validez del código HTML tendrá que usar el DOCTYPE de transición. Para establecer el color de fondo en HTML, utiliza códigos especiales que puede conocer en un editor gráfico o en los servicios especiales en línea. La imagen de fondo se duplica en las colas del área asignada y se encuentra en la parte superior del color de fondo. Para especificar una imagen de fondo, es mejor usar su URL completa. Tengo todo en esto. Gracias por la atención. ¡Buena suerte!

a las 22:37

Editar mensaje