16 Colores estandar (4 bits) BLACK SILVER RED GRAY NAVY YELLOW MAROON WHITE BLUE GREEN FUCHSIA TEAL OLIVE PURPLE AQUA LIME

256 Colores RGB (8 bits) FF3300 FF3333 FF0033 000000 33FF33 00CC00 00CC00 009900 00FFFF 33FFFF CCCCFF CCCCFF 00CCCC YELLOW FUCHSIA TEAL FF3300 FF6600 FF9900 FFCC00 FFFF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 990000 993300 996600 999900 99CC00 99FF00 666600 669900 66CC00 66FF00 FF3333 FF6633 FF9933 FFCC33 FFFF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 990033 993333 996633 999933 99CC33 99FF33 666633 669933 66CC33 66FF33 FFFF33 CCCC00 FF33FF CC00CC 7D337D E100E1 FF3366 FF6666 FF9966 FFCC66 FFFF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 990066 993366 996666 999966 99CC66 99FF66 666666 669966 66CC66 66FF66 CC3300 CC3333 CC0033 CC0000 66FF66 009900 009900 006600 3333FF 66FFFF 0000CC 000066 009999 FFFF66 999900 FF66FF 990099 7D667D CC00CC FF3399 FF6699 FF9999 FFCC99 FFFF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 990099 993399 996699 999999 99CC99 99FF99 666699 669999 66CC99 66FF99 FF9999 FFCC99 FF9966 663333 OLIVE 66FF00 FFCCCC CC0066 FF6699 990066 99FF99 006600 006600 66FF00 6666FF 99FFFF 000099 000033 006666 FFFF99 666600 FF99FF 660066 7D997D AF00AF FF33CC FF66CC FF99CC FFCCCC FFFFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC 6666CC 6699CC 66CCCC 66FFCC 003333 FFFFCC 333300 FFCCFF 330033 7DCC7D 990099 FF33FF FF66FF FF99FF FFCCFF FFFFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF 6666FF 6699FF 66CCFF 66FFFF 990033 993300 660000 330000 CCFFCC 003300 003300 009900 9999FF CCFFFF 000099 000099

RED FF0000

MAROON 990000

LIME 66FF00

GREEN 00FF00

AQUA 00FFFF

TEAL 006666

BLUE 0000FF

336600 339900 006600 009900 33CC00 00CC00 33FF00 00FF00 663300 660000 333300 003300 330000 000000

336633 339933 006633 009933 33CC33 00CC33 33FF33 00FF33 663333 660033 333333 003333 330033 000033

336666 339966 006666 009966 33CC66 00CC66 33FF66 00FF66 663366 660066 333366 003366 330066 000066

336699 339999 006699 009999 33CC99 00CC99 33FF99 00FF99 663399 660099 333399 003399 330099 000099

3366CC 3399CC 0066CC 0099CC 33CCCC 00CCCC 33FFCC 00FFCC 6633CC 6600CC 3333CC 0033CC 3300CC 0000CC

3366FF 3399FF 0066FF 0099FF 33CCFF 00CCFF 33FFFF 00FFFF 6633FF 6600FF 3333FF 0033FF 3300FF 0000FF

Para poner el fondo de la pagina de algn color uniforme, solo debes aadir el parmetro BGCOLOR en el comando BODY (situada al principio del documento), ya sea usando el nombre de uno de los 16 colores bsicos o el cdigo hexadecimal de la trica rojo-verde-azul. Los nmeros hexadecimales, se caracteriza por tener 16 dgitos (en lugar de los diez de la numeracin decimal habitual o dos en la binaria). Estos dgito son: 0 1 2 3 4 5 6 7 8 9 A B C D E F As&iacute:, por ejemplo, el color rojo se representa como #FF0000, porque tiene el toda la intensidad de rojo y nada de verde y azul. Los colores bsicos son: #FF0000 - Rojo #00FF00 - Verde #0000FF - Azul Otros colores son: #FFFFFF - Blanco #000000 - Negro #FFFF00 - Amarillo Para hacer un color ms oscuro, simplemente reduce la intensidad del componente, dejando los otros dos iguales. As, el rojo (#FF0000) se hace ms oscuro asi: #CC0000, #990000, #660000, #330000 etc Para hacer que un color ms pastel, simplemente variar los otros dos colores dejando igual el principal. As, el rojo (#FF0000) se hace ms claro asi: #FF3333, #FF6666, #FF9999, #FFCCCC etc Ejemplo 1: Esto esta en color verde perico

Nombres de colores hexadecimalesDel ms claro al ms oscuro Incluya la notacin hex Color "seguro para web" ms cercano #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #CCFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFCC #FFFFFF #FFFFCC #FFFFCC #FFFFCC #CCCCFF #FFFFCC #FFCCCC #FFFFCC #FFFFCC #FFFFCC #99FFFF #FFCCCC #CCCCCC #FFCCCC #FFCC99 #FFFF99 #FFCCCC #CCCCFF #66FFCC

Nombre del color BLANCO AZUR CREMA NIEVE MARFIL BLANCO FANTASMA BLANCO FLORAL AZUL ALICIA CIAN CLARO MELN VERDE AMARILLO CLARO CONCHA SONROJO LAVANDA HUMO BLANCO ENCAJE ANTIGUO SEDA DE MAZ LINO AMARILLO ALAMBRE DORADO CLARO GASA LIMN BEIGE LAVANDA BATIDO DE PAPAYA ROSA BRUMOSA BLANCO ANTIGUO BLANCO ALMENDRA SOPA TURQUESA PLIDO MOCASN GAINSBORO SOPLIDO MELOCOTN BLANCO NAVAJO DORADO ALAMBRE PLIDO TRIGO POLVO AZUL AGUAMARINA

Cdigo hex #FFFFFF #F0FFFF #F5FFFA #FFFAFA #FFFFF0 #F8F8FF #FFFAF0 #F0F8FF #E0FFFF #F0FFF0 #FFFFE0 #FFF5EE #FFF0F5 #F5F5F5 #FDF5E6 #FFF8DC #FAF0E6 #FAFAD2 #FFFACD #F5F5DC #E6E6FA #FFEFD5 #FFE4E1 #FAEBD7 #FFEBCD #FFE4C4 #AFEEEE #FFE4B5 #DCDCDC #FFDAB9 #FFDEAD #EEE8AA #F5DEB3 #B0E0E6 #7FFFD4

GRIS CLARO ROSA AZUL CLARO CARDO ROSA CLARO AZUL CIELO CLARO VERDE PLIDO AZUL ACERO CLARO CAQUI AZUL CIELO AGUA CIAN PLATA CIRUELA GRIS VERDE CLARO VIOLETA AMARILLO TURQUESA MADERA FORNIDA AMARILLO VERDE BRONCEADO TURQUESA MEDIO SALMN CLARO AGUAMARINA MEDIO GRIS OSCURO ORQUDEA VERDE MAR INTENSO AZUL CIELO INTENSO MARRN ARENA DORADO VERDE PRIMAVERA MEDIO CAQUI OSCURO ACIANO AZUL ROSA CALIENTE SALMN OSCURO TURQUESA OSCURO VERDE PRIMAVERA CORAL CLARO MARRN ROSADO SALMN

#D3D3D3 #FFC0CB #ADD8E6 #D8BFD8 #FFB6C1 #87CEFA #98FB98 #B0C4DE #F0D58C #87CEEB #00FFFF #00FFFF #C0C0C0 #DDA0DD #BEBEBE #90EE90 #EE82EE #FFFF00 #40E0D0 #DEB887 #ADFF2F #D2B48C #48D1CC #FFA07A #66CDAA #A9A9A9 #DA70D6 #8FBC8F #00BFFF #F4A460 #FFD700 #00FA9A #BDB76B #6495ED #FF69B4 #E9967A #00CED1 #00FF7F #F08080 #BC8F8F #FA8072

#CCCCCC #FFCCCC #99CCFF #CCCCCC #FFCCCC #99CCFF #99FF99 #99CCCC #FFCC99 #99CCFF #00FFFF #00FFFF #CCCCCC #CC99CC #CCCCCC #99FF99 #FF99FF #FFFF00 #33CCCC #CCCC99 #99FF33 #CCCC99 #33CCCC #FF9966 #66CC99 #999999 #CC66CC #99CC99 #00CCFF #FF9966 #FFCC00 #00FF99 #CCCC66 #6699FF #FF66CC #FF9966 #00CCCC #00FF66 #FF9999 #CC9999 #FF9966

CHARTREUSE PRPURA MEDIO VERDE CSPED AZUL DODGER VERDE AMARILLO VIOLETA ROJO PLIDO AZUL PIZARRA MEDIO ORQUDEA MEDIO CORAL AZUL CADETE VERDE MAR CLARO DORADO ALAMBRE NARANJA GRIS PIZARRA CLARO FUCSIA MAGENTA VERDE MAR MEDIO PER AZUL ACERO AZUL REAL GRIS PIZARRA TOMATE NARANJA OSCURO AZUL PIZARRA VERDE LIMA LIMA ROJO INDIO ORQUDEA OSCURO AZUL VIOLETA ROSA INTENSO DORADO ALAMBRE OSCURO CHOCOLATE CIAN OSCURO GRIS DIFUSO GRIS ACEITUNA VERDE MAR VERDE CERCETA VIOLETA OSCURO VIOLETA ROJO MEDIO NARANJA ROJO ACEITUNA

#7FFF00 #9370DB #7CFC00 #1E90FF #9ACD32 #DB7093 #7B68EE #BA55D3 #FF7F50 #5F9EA0 #20B2AA #DAA520 #FFA500 #778899 #FF00FF #FF00FF #3CB371 #CD853F #4682B4 #4169E1 #708090 #FF6347 #FF8C00 #6A5ACD #32CD32 #00FF00 #CD5C5C #9932CC #8A2BE2 #FF1493 #B8860B #D2691E #008B8B #696969 #6B8E23 #2E8B57 #008080 #9400D3 #C71585 #FF4500 #808000

#66FF00 #9966CC #66FF00 #3399FF #99CC33 #CC6699 #6666FF #CC66CC #FF6666 #669999 #339999 #CC9933 #FF9900 #669999 #FF00FF #FF00FF #33CC66 #CC9933 #3399CC #3366CC #669999 #FF6633 #FF9900 #6666CC #33CC33 #00FF00 #CC6666 #9933CC #9933FF #FF0099 #CC9900 #CC6633 #009999 #666666 #669933 #339966 #009999 #9900CC #CC0066 #FF3300 #999900

SIENA AZUL PIZARRA OSCURO VERDE ACEITUNA OSCURO VERDE BOSQUE CARMES AZUL MAGENTA OSCURO GRIS PIZARRA OSCURO MARRN MONTURA MARRN LADRILLO REFRACTARIO PRPURA VERDE ROJO AZUL MEDIO NDIGO AZUL MEDIANOCHE VERDE OSCURO AZUL OSCURO AZUL MARINO ROJO OSCURO GRANATE NEGRO

#A0522D #483D8B #556B2F #228B22 #DC143C #0000FF #8B008B #2F4F4F #8B4513 #A52A2A #B22222 #800080 #008000 #FF0000 #0000CD #4B0082 #191970 #006400 #00008B #000080 #8B0000 #800000 #000000

#996633 #333399 #666633 #339933 #CC0033 #0000FF #990099 #336666 #993300 #993333 #993333 #990099 #009900 #FF0000 #0000CC #330099 #000066 #006600 #000099 #000099 #990000 #990000 #000000

Tabla de coloresNombre HTML Cdigoh Cdigodecim ex al R G B R G B Nombre HTML Cdigoh Cdigodecim ex al R G B R G B Nombre HTML Cdigoh Cdigodecim ex al R G B R G B

Colores rojosIndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson CD5C5C 205 92 92 F08080 FA8072 E9967A FFA07A 240 128 128 250 128 114 233 150 122 255 160 122

Colores verdesGreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen ADFF2F 7FFF00 7CFC00 00FF00 173 255 47

Colores marron esCornsilk 127 255 0 BlanchedAlmond FFEBCD 124 252 0 Bisque 0 255 0 NavajoWhite 32CD32 50 205 50 Wheat F5DEB3 DEB887 245 222 179 222 184 135 98FB98 152 251 152 BurlyWood FFDEAD 255 222 173 FFE4C4 255 228 196 255 235 205 FFF8DC 255 248 220

DC143C 220 20 60

Red FireBrick DarkRed

FF0000 B22222 8B0000

255 0 0 178 34 34 139 0 0

LightGreen

90EE90

144 238 144 0 250 154 0 255 127

Tan RosyBrown SandyBrown

D2B48C 210 180 140 BC8F8F F4A460 188 143 143 244 164 96

MediumSpringGre 00FA9A en SpringGreen 00FF7F

Colores rosasMediumSeaGreen 3CB371 Pink LightPink HotPink DeepPink FFC0CB FFB6C1 FF69B4 FF1493 255 192 203 SeaGreen 255 182 193 ForestGreen 255 105 180 Green 255 20 147 DarkGreen MediumVioletRed C71585 PaleVioletRed 199 21 133 YellowGreen DB7093 219 112 147 OliveDrab 6B8E23 808000 556B2F 107 142 35 9ACD32 154 205 50 006400 0 100 0 008000 0 128 0 228B22 34 139 34 2E8B57 46 139 87 60 179 113

Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna Brown Maroon Olive 128 128 0 85 107 47 FFA07A FF7F50 FF6347 FF4500 FF8C00 FFA500 255 160 122 DarkOliveGreen 255 127 80 255 99 71 255 69 0 255 140 0 255 165 0 MediumAquamari 66CDAA 102 205 170 ne DarkSeaGreen LightSeaGreen DarkCyan Teal FFD700 FFFF00 FFFFE0 FFFACD 255 215 0 255 255 0 255 255 224 255 250 205 8FBC8F 143 188 143 Honeydew White Snow

DAA520 218 165 32 B8860B CD853F D2691E 8B4513 184 134 11 205 133 63 210 105 30 139 69 19

A0522D 160 82 45 A52A2A 165 42 42 800000 128 0 0

Colores naranjasLightSalmon Coral Tomato OrangeRed DarkOrange Orange

Colores blanco sFFFFFF FFFAFA F0FFF0 F5FFFA F0FFFF F0F8FF F8F8FF F5F5F5 FFF5EE F5F5DC FDF5E6 FFFAF0 FFFFF0 255 255 255 255 250 250 240 255 240 245 255 250 240 255 255 240 248 255 248 248 255 245 245 245 255 245 238 245 245 220 253 245 230 255 250 240 255 255 240

20B2AA 32 178 170 MintCream 008B8B 008080 0 139 139 Azure 0 128 128 AliceBlue

Colores amarillosGold Yellow LightYellow LemonChiffon

Colores azulesGhostWhite Aqua/Cyan LightCyan PaleTurquoise Aquamarine Turquoise 00FFFF E0FFFF AFEEEE 7FFFD4 40E0D0 0 255 255 WhiteSmoke 224 255 255 Seashell 175 238 238 Beige 127 255 212 OldLace 64 224 208 FloralWhite MediumTurquois 48D1CC 72 209 204 e Ivory

LightGoldenrodYell FAFAD2 250 250 210 ow PapayaWhip Moccasin FFEFD5 FFE4B5 255 239 213 255 228 181

PeachPuff PaleGoldenrod Khaki DarkKhaki

FFDAB9 255 218 185 EEE8AA F0E68C 238 232 170 240 230 140

DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue

00CED1 5F9EA0 4682B4

0 206 209 95 158 160 70 130 180

AntiqueWhite Linen LavenderBlush MistyRose

FAEBD7 250 235 215 FAF0E6 FFF0F5 FFE4E1 250 240 230 255 240 245 255 228 225

BDB76B 189 183 107

B0C4DE 176 196 222 B0E0E6 176 224 230

Colores prpurasLavender Thistle Plum Violet Orchid E6E6FA 230 230 250

Colores grisesGainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black DCDCDC 220 220 220 D3D3D3 211 211 211 C0C0C0 192 192 192

LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue

ADD8E6 173 216 230 87CEEB 87CEFA 00BFFF 1E90FF 6495ED 135 206 235 135 206 250 0 191 255 30 144 255 100 149 237 123 104 238 65 105 225 0 0 255

D8BFD8 216 191 216 DDA0DD 221 160 221 EE82EE 238 130 238

A9A9A9 169 169 169 808080 696969 778899 708090 2F4F4F 000000 128 128 128 105 105 105 119 136 153 112 128 144 47 79 79 000

DA70D6 218 112 214 255 0 255

Fuchsia / Magenta FF00FF MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo SlateBlue DarkSlateBlue

BA55D3 186 85 211 9370DB 147 112 219 8A2BE2 9400D3 9932CC 8B008B 800080 4B0082 138 43 226 148 0 211 153 50 204 139 0 139 128 0 128 75 0 130

MediumSlateBlue 7B68EE RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue 4169E1 0000FF

0000CD 0 0 205 00008B 000080 191970 0 0 139 0 0 128 25 25 112

6A5ACD 106 90 205 483D8B 72 61 139

Vemos cmo colocar una imagen en una pgina web y algunos atributos bsicos para asignarle estilos a las imgenes en HTML. Sin duda uno de los aspectos ms vistosos y atractivos de las pginas web es el grafismo. La introduccin en nuestro texto de imgenes puede ayudarnos a explicar ms fcilmente nuestra informacin y darle un aire mucho ms esttico. El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distraccin para el navegante, quien tendr ms dificultad en encontrar la informacin necesaria. El uso de imgenes tambin tiene que ser realizado con cuidado porque aumentan el tiempo de carga de la pgina, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexin o si es un poco impaciente. Por ello es recomendable siempre optimizar las imgenes para Internet, haciendo que su tamao en bytes sea lo mnimo posible, para facilitar la descarga, pero sin que ello comprometa mucho su calidad. En este capitulo no explicaremos como crear ni tratar las imgenes, nicamente diremos que para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Tampoco explicaremos las particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma de optimizar nuestras imgenes. Un capitulo posterior al respecto ser dedicado a este menester: Formatos grficos para pginas web. Las imgenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG (para fotos). Estos archivos los podemos obtener desde diversas vas, como por ejemplo nuestra cmara digital, aunque tambin pueden ser creados por nosotros mismos con algn editor grfico o pueden ser descargados gratuitamente en sitios web especializados. As pues, en estos primeros captulos nos limitaremos a explicar como insertar y alinear debidamente en nuestra pgina una imagen ya creada. La etiqueta que utilizaremos para insertar una imagen es (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo grfico mediante el atributo src (source). La sintaxis queda entonces de la siguiente forma: Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas siguen siendo las mismas, lo nico que cambia es que, en lugar de una pgina destino, el destino es un archivo grfico. Aparte de este atributo, indispensable obviamente para la visualizacin de la imagen, la etiqueta nos propone otra serie de atributos de mayor o menor utilidad, que listamos a continuacin:

Atributo alt Dentro de las comillas de este atributo colocaremos una brevsima descripcin de la imagen. Esta etiqueta no es indispensable pero presenta varias utilidades. Primeramente, durante el proceso de carga de la pgina, cuando la imagen no ha sido todava cargada, el navegador mostrara esta descripcin, con lo que el navegante se puede hacer una idea de lo que va en ese lugar. Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red con una opcin del navegador que desactiva el muestreo de imgenes, con lo que tales personas podrn siempre saber de qu se trata el grfico y eventualmente cambiar a modo con imgenes para visualizarla. Adems, determinadas aplicaciones para discapacitados o telfonos vocales que no muestran imgenes ofrecen la posibilidad de leerlas por lo que nunca esta de ms pensar en estos colectivos. En general podemos considerar como aconsejable el uso de este atributo salvo para imgenes de poca importancia y absolutamente indispensable si la imagen en cuestin sirve de enlace. Atributos height y width Definen la altura y anchura respectivamente de la imagen en pxeles. Todos los archivos grficos poseen unas dimensiones de ancho y alto. Estas dimensiones pueden obtenerse a partir del propio diseador grafico o bien haciendo clic con el botn derecho sobre la imagen vista por el navegador para luego elegir propiedades sobre el men que se despliega. El hecho de explicitar en nuestro cdigo las dimensiones de nuestras imgenes ayuda al navegador a confeccionar la pgina de la forma que nosotros deseamos antes incluso de que las imgenes hayan sido descargadas. As, si las dimensiones de las imgenes han sido proporcionadas, durante el proceso de carga, el navegador reservara el espacio correspondiente a cada imagen creando una maquetacin correcta. El usuario podr comenzar a leer tranquilamente el texto sin que este se mueva de un lado a otro cada vez que una imagen se cargue. Adems de esta utilidad, el alterar los valores de estos dos atributos, es una forma inmediata de redimensionar nuestra imagen. Este tipo de utilidad no es aconsejable dado que, si lo que pretendemos es aumentar el tamao, la perdida de calidad de la imagen ser muy sensible. Inversamente, si deseamos disminuir su tamao, estaremos usando un archivo ms grande de lo necesario para la imagen que estamos mostrando con lo que aumentamos el tiempo de descarga de nuestro documento innecesariamente.

Es importante hacer hincapi en este punto ya que muchos debutantes tienen esa mala costumbre de crear grficos pequeos redimensionando la imagen por medio de estos atributos a partir de archivos de tamao descomunal. Hay que pensar que el tamao de una imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que resulta ser aproximadamente 4 veces inferior. Atributo border Definen el tamao en pxeles del cuadro que rodea la imagen. De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente til cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dicho caso tendremos que especificar border="0". Atributos vspace y hspace Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imgenes, etc. Atributo lowsrc Con este atributo podemos indicar un archivo de la imagen de baja resolucin. Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolucin (que ocupa muy poco y que se transfiere muy rpido). Posteriormente descarga y muestra la imagen de resolucin adecuada (sealada con el atributo src, que se supone que ocupar ms y ser ms lenta de transferir). Este atributo est en desuso, aunque supone una ventaja considerable para que la descarga inicial de la web se realice ms rpido y que un visitante pueda ver una muestra de la imagen mientras se descarga la imagen real. Truco: Utilizar imagenes como enlaces Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de enlace. Vista la estructura de los enlaces podemos muy fcilmente adivinar el tipo de cdigo necesario: Ejemplo prctico Resultar obvio para los lectores hacer ahora una pgina que contenga una imagen varias veces repetida pero con distintos atributos.

Una de las veces que salga debe mostrarse con su tamao originar y con un borde de 3 pixeles.

En otra ocasin la imagen aparecer sin borde, con su misma altura y con una anchura superior a la original Tambin mostraremos la imagen sin borde, con su misma anchura y con una altura superior a la original Por ltimo, mostraremos la imagen con una altura y anchura mayores que las originales, pero proporcionalmente igual que antes. Vamos a utilizar esta imagen para hacer el ejercicio:

Las dimensiones originales de la imagen son 28x21, as que este sera el cdigo fuente:

...............elementos ttulo ................

de de texto..y

encabezado la otros

del

archivo......... pgina

elementos...........................

Observe que el documento abre con la etiqueta y cierra con la etiqueta . Igual pasa con las otras marcas presentes en el documento. Algunas marcas no necesitan una etiqueta de cierre. En la marca que abre, se pueden incluir atributos de marca. Por ejemplo las marcas ... indican el inicio y el fin de un prrafo. Un atributo para un prrafo es la manera de alinearlo, por ejemplo a la izquierda; podemos incluir este atributo en la etiqueta que abre, ...

Por ejemplo, este que usted esta leyendo ahora, fue generado con el siguiente cdigo

prrafo

este prrafo color="#FF0000">ahora, el siguiente cdigo

Algunas marcas usadas aqu son lnea horizontal antes del prrafo (horizontal line)
inicia parrfo alineado a la izquierda salto de lnea (break) fin de parrfo

En general, si usamos un creador de pginas Web como FrontPage o Dreamweaver, no debemos preocuparnos de conocer muchas etiquetas para crear nuevos elementos, FrontPage y dreamweaver lo hace por nosotros. Sin embargo, necesitamos familiarizarnos con algunas de estas etiquetas para el trabajo futuro con applets, controles ActiveX, JavaScript, etc. Adems los editores a veces no nos dejan hacer exactamente lo que nosotros queremos. En estos casos se debe entrar al cdigo HTML y hacer las modificaciones adecuadas.

2.1 Vnculos Para crear vnculos en una pgina, HTML usa la etiqueta .... Esta etiqueta usa el atributo HREF (Hypertext Reference) y se usa para especificar el nombre o el URL del archivo (o un sitio Web) hacia el cual apunta el vnculo. Tambin se puede usar esta marca para apuntar a una funcin de JavaScript e invocarla. Veamos los ejemplos siguientes

Ir a pgina 12 Men ITCR micorreo Herramientas

Actividad: use su editor html para crear una pgina web con una una liga a la pgina de la revista virtual http://www.itcr.ac.cr/revistamate/ e incluya su e-mail.

Solucin: hay que crear un archivo con el cdigo adecuado (y guardarlo con extensin 'html' si el editor no guarda con esta extensin) Revista Virtual Mi email

2.2 Imgenes Para colocar una imagen se usa la etiqueta . Esta etiqueta (al igual que o
) no tiene etiqueta de cierre. El atributo SRC indica el nombre o URL de la imagen. Por ejemplo, para incluir una imagen "AniSP2.gif" ,que est en la subcarpeta "images" del directorio actual, se pone el cdigo

Observe los atributos correspondientes a las dimensiones de la imagen.

Actividad: Tome una imagen en formato "gif" y pguela en la subcarpeta "images", luego use su editor html para insertar esta imagen en el documento con las dimensiones adecuadas.

2.3 Tablas Para crear una tabla se usan las etiquetas ..., por ejemplo

celda

Algunas marcas usadas aqu son bgcolor="#FFFF99" ... color de fondo de la tabla. El color viene especificado con su cdigo hexadecimal. define una fila de celdas define el contenido de una celda fin de prrafo

Por supuesto podemos poner tablas dentro de tablas. Ms adelante veremos lo til que es esto. Ejemplo: tabla en un celda

Interna

Actividad: use su editor html para hacer insertar una tabla dentro de otra tabla para generar un efecto de marco. Observe un posible resultado Tabla Interna

2.4 Marcos Para definir un conjunto de marcos se usan las marcas ... Para definir cada marco se usa la marca Por ejemplo para generar un conjunto de tres marcos, con sus respectivas pginas, ponemos

Pag1

Nota: para eleminar los bordes de los marcos se pone el atributo frameborder="0", por ejemplo

Actividad: En una carpeta "Pags" incluya tres pginas, posiblemente en blanco, con los nombres apropiados para generar los marcos del ejemplo anterior. La pgina con marcos queda, en este caso, fuera de la carpeta "Pags".

2.5 Botones Para insertar un botn se usa la marca Por ejemplo, para incluir un botn de nombre 'button1' con etiqueta 'Etiqueta', que invoca una funcin progrmaJS1(), se pone el cdigo

En este caso, el botn responde al evento 'hacer clic' sobre el botn. Las funciones pueden ser programas en JavaScript cuyo cdigo puede estar entre las marcas ... o entre las marcas ... En la seccin JavaScript volveremos sobre este tema y realizaremos la actividad correspondiente. Por ahora haga clic en el botn que sigue: El cdigo que se us es este: