FONDO DE PÁGINA e INSERCIÓN DE IMÁGENES
FONDO DE PÁGINA
La etiqueta BODY tiene varios atributos, los dos que se verán en e...
A continuación se dejan los nombres de los colores en inglés que HTML soporta:
Pero existe además una variante: HTML recon...
A continuación se deja un listado más extenso de los códigos de colores de HTML que puede usar:
Nombre del color Código he...
MOCASÍN #FFE4B5 #FFCCCC
GAINSBORO #DCDCDC #CCCCCC
SOPLIDO MELOCOTÓN #FFDAB9 #FFCCCC
BLANCO NAVAJO #FFDEAD #FFCC99
DORADO A...
ROSA CALIENTE #FF69B4 #FF66CC
SALMÓN OSCURO #E9967A #FF9966
TURQUESA OSCURO #00CED1 #00CCCC
VERDE PRIMAVERA #00FF7F #00FF6...
VERDE MAR #2E8B57 #339966
VERDE CERCETA #008080 #009999
VIOLETA OSCURO #9400D3 #9900CC
VIOLETA ROJO MEDIO #C71585 #CC0066
...
NOTA: Para que esto resulte, la imagen deberá de encontrarse en la misma carpeta donde se encuentre
la página web. Una vez...
Guarde este documento como imágenes.html y deberá verse así en el navegador:
Si quisiéramos que las imágenes aparecieran d...
Próxima SlideShare
Cargando en…5
×

Practica 4 HTML - Fondo de página e inserción de imágenes

72 visualizaciones

Publicado el

Colores e imágenes es lo que esta práctica abarca. Adiós a las páginas web aburridas.

Publicado en: Internet
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
72
En SlideShare
0
De insertados
0
Número de insertados
7
Acciones
Compartido
0
Descargas
2
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Practica 4 HTML - Fondo de página e inserción de imágenes

  1. 1. FONDO DE PÁGINA e INSERCIÓN DE IMÁGENES FONDO DE PÁGINA La etiqueta BODY tiene varios atributos, los dos que se verán en esta clase son:  <BODY BGCOLOR=color”>: se define el nombre u código del color en hexadecimal.  <BODY BACKGROUND=“ruta_de_imagen”>: se define la imagen de fondo del sitio web. Escriba el siguiente código en Sublime Text 3: Guarde esto como fondo.html y al ejecutarlo en el navegador deberá verse así: Como verá basta con escribir el nombre del color que se desea para que el sitio web lo tome como fondo y esto se mantendrá en toda la página. Si deseamos modificar este color, basta con sobre escribirlo en el atributo bgcolor. A manera de ejercicio cambie los colores de fondo a: ROJO (red), AZUL (blue), Amarillo (Yellow), NEGRO (black), PÚRPURA (purple), CAFÉ (Brown) y ROSA (pink).
  2. 2. A continuación se dejan los nombres de los colores en inglés que HTML soporta: Pero existe además una variante: HTML reconoce también los códigos hexadecimales de cada color. Muchos colores no se pueden escribir en inglés o se desea una combinación de colores muy específica y particular, así que se ha definido como estándar los códigos de colores. Modifique su archivo ya creado de la siguiente manera: Ejecute este sitio en el navegador y el resultado será el siguiente:
  3. 3. A continuación se deja un listado más extenso de los códigos de colores de HTML que puede usar: Nombre del color Código hex Color "seguro para web" más cercano BLANCO #FFFFFF #FFFFFF AZUR #F0FFFF #FFFFFF CREMA #F5FFFA #FFFFFF NIEVE #FFFAFA #FFFFFF MARFIL #FFFFF0 #FFFFFF BLANCO FANTASMA #F8F8FF #FFFFFF BLANCO FLORAL #FFFAF0 #FFFFFF AZUL ALICIA #F0F8FF #FFFFFF CIAN CLARO #E0FFFF #CCFFFF MELÓN VERDE #F0FFF0 #FFFFFF AMARILLO CLARO #FFFFE0 #FFFFFF CONCHA #FFF5EE #FFFFFF SONROJO LAVANDA #FFF0F5 #FFFFFF HUMO BLANCO #F5F5F5 #FFFFFF ENCAJE ANTIGUO #FDF5E6 #FFFFFF SEDA DE MAÍZ #FFF8DC #FFFFCC LINO #FAF0E6 #FFFFFF AMARILLO ALAMBRE DORADO CLARO #FAFAD2 #FFFFCC GASA LIMÓN #FFFACD #FFFFCC BEIGE #F5F5DC #FFFFCC LAVANDA #E6E6FA #CCCCFF BATIDO DE PAPAYA #FFEFD5 #FFFFCC ROSA BRUMOSA #FFE4E1 #FFCCCC BLANCO ANTIGUO #FAEBD7 #FFFFCC BLANCO ALMENDRA #FFEBCD #FFFFCC SOPA #FFE4C4 #FFFFCC TURQUESA PÁLIDO #AFEEEE #99FFFF
  4. 4. MOCASÍN #FFE4B5 #FFCCCC GAINSBORO #DCDCDC #CCCCCC SOPLIDO MELOCOTÓN #FFDAB9 #FFCCCC BLANCO NAVAJO #FFDEAD #FFCC99 DORADO ALAMBRE PÁLIDO #EEE8AA #FFFF99 TRIGO #F5DEB3 #FFCCCC POLVO AZUL #B0E0E6 #CCCCFF AGUAMARINA #7FFFD4 #66FFCC GRIS CLARO #D3D3D3 #CCCCCC ROSA #FFC0CB #FFCCCC AZUL CLARO #ADD8E6 #99CCFF CARDO #D8BFD8 #CCCCCC ROSA CLARO #FFB6C1 #FFCCCC AZUL CIELO CLARO #87CEFA #99CCFF VERDE PÁLIDO #98FB98 #99FF99 AZUL ACERO CLARO #B0C4DE #99CCCC CAQUI #F0D58C #FFCC99 AZUL CIELO #87CEEB #99CCFF AGUA #00FFFF #00FFFF CIAN #00FFFF #00FFFF PLATA #C0C0C0 #CCCCCC CIRUELA #DDA0DD #CC99CC GRIS #BEBEBE #CCCCCC VERDE CLARO #90EE90 #99FF99 VIOLETA #EE82EE #FF99FF AMARILLO #FFFF00 #FFFF00 TURQUESA #40E0D0 #33CCCC MADERA FORNIDA #DEB887 #CCCC99 AMARILLO VERDE #ADFF2F #99FF33 BRONCEADO #D2B48C #CCCC99 TURQUESA MEDIO #48D1CC #33CCCC SALMÓN CLARO #FFA07A #FF9966 AGUAMARINA MEDIO #66CDAA #66CC99 GRIS OSCURO #A9A9A9 #999999 ORQUÍDEA #DA70D6 #CC66CC VERDE MAR INTENSO #8FBC8F #99CC99 AZUL CIELO INTENSO #00BFFF #00CCFF MARRÓN ARENA #F4A460 #FF9966 DORADO #FFD700 #FFCC00 VERDE PRIMAVERA MEDIO #00FA9A #00FF99 CAQUI OSCURO #BDB76B #CCCC66 ACIANO AZUL #6495ED #6699FF
  5. 5. ROSA CALIENTE #FF69B4 #FF66CC SALMÓN OSCURO #E9967A #FF9966 TURQUESA OSCURO #00CED1 #00CCCC VERDE PRIMAVERA #00FF7F #00FF66 CORAL CLARO #F08080 #FF9999 MARRÓN ROSADO #BC8F8F #CC9999 SALMÓN #FA8072 #FF9966 CHARTREUSE #7FFF00 #66FF00 PÚRPURA MEDIO #9370DB #9966CC VERDE CÉSPED #7CFC00 #66FF00 AZUL DODGER #1E90FF #3399FF VERDE AMARILLO #9ACD32 #99CC33 VIOLETA ROJO PÁLIDO #DB7093 #CC6699 AZUL PIZARRA MEDIO #7B68EE #6666FF ORQUÍDEA MEDIO #BA55D3 #CC66CC CORAL #FF7F50 #FF6666 AZUL CADETE #5F9EA0 #669999 VERDE MAR CLARO #20B2AA #339999 DORADO ALAMBRE #DAA520 #CC9933 NARANJA #FFA500 #FF9900 GRIS PIZARRA CLARO #778899 #669999 FUCSIA #FF00FF #FF00FF MAGENTA #FF00FF #FF00FF VERDE MAR MEDIO #3CB371 #33CC66 PERÚ #CD853F #CC9933 AZUL ACERO #4682B4 #3399CC AZUL REAL #4169E1 #3366CC GRIS PIZARRA #708090 #669999 TOMATE #FF6347 #FF6633 NARANJA OSCURO #FF8C00 #FF9900 AZUL PIZARRA #6A5ACD #6666CC VERDE LIMA #32CD32 #33CC33 LIMA #00FF00 #00FF00 ROJO INDIO #CD5C5C #CC6666 ORQUÍDEA OSCURO #9932CC #9933CC AZUL VIOLETA #8A2BE2 #9933FF ROSA INTENSO #FF1493 #FF0099 DORADO ALAMBRE OSCURO #B8860B #CC9900 CHOCOLATE #D2691E #CC6633 CIAN OSCURO #008B8B #009999 GRIS DIFUSO #696969 #666666 GRIS ACEITUNA #6B8E23 #669933
  6. 6. VERDE MAR #2E8B57 #339966 VERDE CERCETA #008080 #009999 VIOLETA OSCURO #9400D3 #9900CC VIOLETA ROJO MEDIO #C71585 #CC0066 NARANJA ROJO #FF4500 #FF3300 ACEITUNA #808000 #999900 SIENA #A0522D #996633 AZUL PIZARRA OSCURO #483D8B #333399 VERDE ACEITUNA OSCURO #556B2F #666633 VERDE BOSQUE #228B22 #339933 CARMESÍ #DC143C #CC0033 AZUL #0000FF #0000FF MAGENTA OSCURO #8B008B #990099 GRIS PIZARRA OSCURO #2F4F4F #336666 MARRÓN MONTURA #8B4513 #993300 MARRÓN #A52A2A #993333 LADRILLO REFRACTARIO #B22222 #993333 PÚRPURA #800080 #990099 VERDE #008000 #009900 ROJO #FF0000 #FF0000 AZUL MEDIO #0000CD #0000CC ÍNDIGO #4B0082 #330099 AZUL MEDIANOCHE #191970 #000066 VERDE OSCURO #006400 #006600 AZUL OSCURO #00008B #000099 AZUL MARINO #000080 #000099 ROJO OSCURO #8B0000 #990000 GRANATE #800000 #990000 NEGRO #000000 #000000 Además de esto, es posible insertar una imagen de fondo en nuestra página HTML. Modifique el código como se muestra a continuación. La imagen utilizada puede descargarla desde acá: http://goo.gl/gBtPHJ
  7. 7. NOTA: Para que esto resulte, la imagen deberá de encontrarse en la misma carpeta donde se encuentre la página web. Una vez descargada la imagen deberá moverla obligatoriamente a la misma carpeta donde está creando su página web. Como puede notar ya tenemos una imagen de fondo en nuestro sitio web. Si agregásemos texto a nuestra página web, u otro elemento, este se vería sobre la imagen. Sin embargo, los colores de las fuentes, tablas y otros elementos deberán de ir acorde a la imagen de fondo. INSERCION DE IMÁGENES Cree un nuevo documento en Sublime Text 3, escriba el siguiente código. Las imágenes a utilizar puede descargarlas de los enlaces proporcionados a continuación. MUSICA: https://app.box.com/s/0w5dn8cm3zgn5a31y498 JUEGOS: https://app.box.com/s/95qwt10k2emsc8ffx1sy COMIDA: https://app.box.com/s/gwuhlnfouhyzoy44qesk
  8. 8. Guarde este documento como imágenes.html y deberá verse así en el navegador: Si quisiéramos que las imágenes aparecieran de manera vertical tendríamos que agregar un salto de línea al finalizar cada una: Y el resultado sería:

×