Practica 4 HTML - Fondo de página e inserción de imágenes
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. 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. 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
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. 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. 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: