Este documento explica cómo insertar colores, imágenes y vínculos en el diseño de páginas web. Explica los códigos de colores HTML y cómo usarlos para configurar el color de fondo, texto y enlaces. También describe cómo insertar imágenes usando la etiqueta <img> y cómo crear hipervínculos usando <a href> para vincular a otras páginas.

1. INSERTARCOLORES, IMÁGENESY VINCULOSEN EL DISEÑODE PÁGINA 1
Procedimiento para Insertar Colores, Imágenes y Vínculos en el Diseño de Paginas
Brandon Omar Lizarazo Tineo
Institución Educativa Técnica Simón Bolívar
Notas de Autor:

2. INSERTARCOLORES, IMÁGENESY VINCULOSEN EL DISEÑODE PÁGINA 2
Tabla de contenido
Códigos de Colores HTML....................................................................................................................4
Tabla de Colores HTML....................................................................................................................4
Selector de colores HTML................................................................................................................4
¿Cómo Usar los Códigos de Colores HTML? ......................................................................................4
Teoría Sobre los Códigos de Colores HTML .......................................................................................5

3. INSERTARCOLORES, IMÁGENESY VINCULOSEN EL DISEÑODE PÁGINA 3

4. INSERTARCOLORES, IMÁGENESY VINCULOSEN EL DISEÑODE PÁGINA 4
Códigos de Colores HTML
El sitiowebCódigosde coloresHTML le proporcionaherramientasgratuitasde colorespara
encontrarcoloresHTML para su sitioweb.LasexcelentesherramientasTablade coloresHTML y
Selectorde coloresHTML harán que estatarea sea pancomido.
Para empezarrápidamente ausarColoresHTML en susitioweb,échele unvistazoa¿Cómousar
loscódigosde coloresHTML?. Si deseaaprenderqué significarealmenteestacombinaciónde caracteres
enCódigosde coloresHTML échele unvistazoala secciónTeoríasobre loscódigosde coloresHTML.
Coloressegurosparala Webesla listade coloresque se venigual entodoslossistemasoperativos.
Si es daltónicoconsulte losNombresde coloresHTMLpara superarese problema.
Tabla de Colores HTML
Con estaTablade coloresHTML dinámicapuede conseguircódigosHTMLpara loscoloresbásicos.
Haga clic encualquiercuadrode color para conseguirsuCódigode colorHTML. A continuaciónhayuna
listade loscoloresseleccionadosrecientemente.Paraguardarun color HTML para una próximavisita
haga clicen su chincheta.
Selector de colores HTML
Desplace la barra de desplazamiento vertical para elegir el color y después haga clic en el
cuadro de colores a la izquierda para conseguir el Código de color HTML para elegir el tono de
color deseado.
Puede empezar con su propio color escribiendo su código de color en el campo de entrada
superior.
¿Cómo Usar los Códigos de Colores HTML?
Con los Códigos de colores HTML puede establecer el color de fondo del sitio web, el
color del texto, de las celdas en las tablas y mucho más.

5. INSERTARCOLORES, IMÁGENESY VINCULOSEN EL DISEÑODE PÁGINA 5
Usar los Códigos de Colores HTML para elColor de Fondo del Sitio Web
<bodystyle="background:#80BFFF">
Usar los Códigos de Colores HTML para Configurar elColor de la Fuente/texto
<span style="color:#80BFFF">
Usar los Códigos de Colores HTML para elColor de Fondo de las Tablas
<table style="background:#80BFFF">
Usar los Códigos de Colores HTML para los Colores de los Enlaces
<a style="color:#80BFFF">
Teoría Sobre los Códigos de Colores HTML
Seguramente se estápreguntando:« ¿Tiene algúnsignificadoestaextrañacombinaciónde letrasy
números?» Pueslarespuestaes «Sí» yasí escomo funciona:)
Formato de los Códigos HTML
Cada códigoHTML comprende el símbolo«#» y6 letraso números.Estosnúmerosse expresanen
el sistemade numeraciónhexadecimal.Porejemplo«FF» enhexadecimal representael número255 en
Decimal.
Significado de los Símbolos
Significadode lossímbolos:Los dosprimerossímbolosdel códigode colorHTML representanla
intensidaddel colorrojo.00 esel menosintensoyFFes el más intenso.El terceryel cuarto número
representanlaintensidaddel verdeyel quintoyel sextorepresentanlaintensidaddel azul.Así,conesta
combinaciónde laintensidaddelrojo,verde yazul podemosmezclarcualquiercolorque deseemosde
corazón.
Ejemplos
#FF0000 - Coneste códigoHTML le decimosal navegadorque muestre lamáximacantidadde rojo
y nada de verde ni de azul.El resultadoesevidentemente el colorrojopuro:
#00FF00 - Este códigoHTML muestrasoloel verde ynada de rojoni de azul.El resultadoes:

6. INSERTARCOLORES, IMÁGENESY VINCULOSEN EL DISEÑODE PÁGINA 6
#0000FF - Este códigoHTML muestrasoloel azul y nada de rojo ni de verde.El resultadoes:
#FFFF00 - Con la combinaciónde colorrojoy verde obtenemosel amarillo:
#CCEEFF - Cogemosunpocode rojo,un pocomás de verde y el máximode azul para obtenerel
colordel cielo:
Cómocolocar imágenesconHTML
Una de lasprimerascosasque debemosaprenderdel HTMLes laetiqueta<img>que funcionapara
colocar imágenesdentrode unapáginaweb.
Para poneruna imágenutilizamosel siguiente código:
<img src="imagenHTML.jpg">
Donde "imagenHTML.jpg"eslaimagenque vamosa colocar.Deberáestarubicadaen el mismo
directorio.Si queremoscolocarunaimagenconHTML enuna páginaque no estácolocadadentrodel
mismodirectorio,podemosusarunaruta absoluta:
<img src="folder/imagenHTML.jpg"
La etiqueta<img>tiene variaspropiedascomoson:
border,width,height,alt
Ejemploconpropiedadesde imágenen HTML
<img src="imagenHTML.jpg"border="0"width="10"height="10">
El ancho y alto(width,height) se colocaenpixelesydebencorresponderal tamañooriginal de la
imagenpara que nose distorcione.
Los formatossoportadosporel explorer sonjpg,gif ypng.

7. INSERTARCOLORES, IMÁGENESY VINCULOSEN EL DISEÑODE PÁGINA 7
INSERTARENLACESHTML
solocopiasy pegasel siguiente códigoyponesladireccióndelsitioalinkar:
<a href="DIRECCION DELA PAGINA A LINKAR">NOMBREDE LA PAGINA</a>
Si además añades target="_blank" despuésde la direcciónde la página (dejandoun espacio),e
linkse abrirá enuna nuevaventana.
De igual forma puedeninsertarse enla sidebar.