8
Click here to load reader
| Date post: | 29-Jun-2015 |
| Category: |
Internet |
| Upload: | erick-cruz |
| View: | 40 times |
| Download: | 0 times |
Click here to load reader
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).
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:
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
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
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
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
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
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:
