Introducción a HTML

Alexis Cabrera Mondeja MSc.

1

Introducción a HTML

Objetivo
• Conocer y aplicar el HTML como lenguaje
base para el desarrollo de aplicaciones
Web.

Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco – Cartagena de
Indias

2

Introducción a HTML

Temática
• El lenguaje HTML.
• Tags básicos.
• Formato de texto.
• Listas.
• Tablas.
• Hiperenlaces
• Imágenes y objetos.
• Marcos.
• Otros tags.
Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco – Cartagena de
Indias

3

Lenguaje Estandarizado y Generalizado de Marcado). con enlaces que conducen a otros documentos o fuentes de información. 4 . sonido. etc). y con elementos multimedia insertados en él(gráficos. El hipertexto es un texto presentado de forma estructurada y agradable.     HTML(Hyper Text Markup Language. Se originó a partir del SGML(Standard Generalized Markup Language.Introducción a HTML El lenguaje HTML. En 1989. Tim Berners-Lee y sus asociados en el CERN(Laboratorio Europeo para Partículas Físicas) inventaron una serie de protocolos que dieron origen al HTML y la WWW. Lenguaje de Marcado de Hipertexto).

Introducción a HTML El lenguaje HTML. Ing. sólo se observa el efecto de las marcas sobre los elementos a los que caracterizan.w3.org/TR/html401/se encuentra el documento en diferentes formatos con la última especificación del HTML correspondiente al 24 de Diciembre de 1999.     Es un lenguaje interpretado. Consiste en una serie de etiquetas(tags) encerradas entre los símbolos <tag>. una de apertura y otra de cierre. Las etiquetas definidas por HTML no son visibles para el usuario. esta última tiene asignado el mismo nombre que la de apertura. En la página Web http://www. Casi todas las etiquetas constan de dos marcas. excepto que debe ir precedida del símbolo / . ( por ejemplo. <B> y </B>). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 5 .

La cabecera de una página suele incluir información útil para el navegador del cliente y el cuerpo contiene los datos que se desean mostrar al usuario.    Un documento HTML consta de tres secciones: una linea donde se indica la versión de HTML utilizada(<!DOCTYPE>).Introducción a HTML Tags básicos.01 Frameset//EN”> Ing. Si se incluye la version de HTML utilizada.01//EN”> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 6 . la cabecera(delimitada por las etiquetas <HEAD> y </HEAD> y el cuerpo(delimitado por las etiquetas <BODY> y </BODY>). debe ser la primera linea del documento y puede ser de la siguiente manera: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.

-->. !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.Información de la cabecera de la página --> </head> <body> <!-.01//EN"> <!– Archivo paginavacia.Introducción a HTML Tags básicos.  Para incluir comentarios se utilizan las etiquetas <!-. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 7 .htm --> <html> <head> <title>Página Vacía</title> <!-.Información del cuerpo de la página --> </body> </html> Ing.

teniendo en cuenta que no cortan las palabras. Al incluir texto en un página se debe tener presente que los navegadores interpretan un cambio de línea o varios caracteres blancos seguidos como un único carácter blanco. Los navegadores incluyen los cambios de línea de manera automática en función del tamaño de la ventana. La etiqueta <P> indica que el texto que sigue es un nuevo párrafo. Para alinear párrafos de texto se utiliza el comando <P ALIGN = LEFT|CENTER|RIGHT|JUSTIFY>. Ing.Introducción a HTML Formato de texto. La etiqueta <BR> introduce un salto de línea. es que esta última genera una separación mayor que <BR>. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 8 . La diferencia con <P>.      Es el elemento más habitual de una página HTML. La utilización de la etiqueta de cierre </P> es opcional.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 9 . en donde xx se da en pixeles o puntos de la pantalla). en la presentación final se respetan los espacios.Introducción a HTML Formato de texto. <HR WIDTH=20% ALIGN = CENTER SIZE = 5 NOSHADE>  La etiqueta <PRE> permite desplegar en la pantalla el texto tal como lo escribimos en el documento. el ancho de la linea con WIDTH(<HR WITDH=xx>. la justificación y los saltos de línea que se emplearon en el documento original. La etiqueta <HR> traza una línea horizontal para separar bloques de texto. Se puede indicar la alineacion con ALIGN(<HR ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>). donde xx se expresa en pixeles o en porcentaje del ancho total de la pantalla) y la eliminación del sombreado con NOSHADE(<HR NOSHADE>). <PRE> texto formateado con espacios </PRE>  Ing. es decir. el espesor o grueso de la linea con SIZE(<HR SIZE=xx>.

<H3>.  Se puede indicar la alineación con ALIGN(<H1 ALIGN=LEFT|CENTER| RIGHT> texto <H1>).  Los distintos tipos de letras que podemos obtener son: <B> Negrita </B> <I> itálica</I> <BIG> GRANDE </BIG> <SMALL> pequeña</SMALL> <SUB> SUBÍNDICE </SUB>  <SUP> SUPERINDICE </SUP> <U> Subrayado </U> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 10 . <H5> y <H6> con sus respectivas marcas de cierre. <H2>.Introducción a HTML Formato de texto. <H4>. La primera es la cabecera de mayor tamaño y la última la menor. Cuando se necesiten titulos o cabeceras de diferentes tamaños se utilizan las etiquetas <H1>.

Introducción a HTML Formato de texto(Ejemplo). varios blancos seguidos aparecen exactamente igual. Además.01//EN"> <html> <head> <title>Ejemplo de página con texto con formato</title> </head> <body> <HR WIDTH=20% ALIGN = CENTER SIZE = 5 NOSHADE> <PRE> Los cambios de línea de este texto son los que aparecen en la ventana del navegador. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 11 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. </PRE> Ing.

centrado <BR> y con cambios de línea generados con BR.Introducción a HTML Formato de texto(Ejemplo). <BR> </P> <B> Negrita </B><BR> <I> itálica</I><BR> <BIG> GRANDE </BIG><BR> <SMALL> pequeña</SMALL><BR> <STRONG> Enfásis intenso </STRONG><BR> <SUB> SUBÍNDICE </SUB> <SUP> SUPERINDICE </SUP> <H1> TITULO </H1> <H2> TITULO </H2> <H2> TITULO </H2> <H3> TITULO </H3> Ing. <P ALIGN = CENTER> Párrafo de texto <BR> marcado con P. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 12 .

Introducción a HTML Formato de texto(Ejemplo). <H4> TITULO </H4> <H5> TITULO </H5> <H6> TITULO </H6> <ADDRESS>Cartagena de Indias </ADDRESS> <EM> Texto enfatizado </EM> </body> </html> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 13 .

pero sin ningún orden. Se crean con los pares de etiquetas <UL> </UL>. Las listas ordenadas muestran un conjunto de elementos o sucesos con un orden estricto.Introducción a HTML Listas. Las listas no ordenadas muestran un conjunto de elementos relacionados entre sí.     HTML ofrece varios mecanismos para elaborar listas de informacion. Se crean con los pares de etiquetas <OL> </OL>. las cuales pueden contener elementos de los siguientes tipos: ordenados. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 14 . Ing. los elementos son sangrados(tabulados) automáticamente y deben ser precedidos por la etiqueta <LI> sin etiqueta de cierre. no ordenados y definiciones. En las dos listas anteriores.

i Nros romanos minúsculas i. III.. ii.Introducción a HTML Listas. A Letras mayúsculas A.   HTML permite anidar listas. a Letras minúsculas a. I Nros romanos mayúsculas I.. La listas ordenadas pueden ser controladas mediante el uso de los siguientes atributos : <OL TYPE=x> permite especificar el estilo de numeración como muestra la siguiente tabla: TIPO ESTILO NUMERACION 1 Números 1....3. lo cual significa que un elemento de una lista puede ser a su vez otra lista..c.b.C...2.B... Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 15 . II. Ing. iii.

Introducción a HTML Listas. La etiqueta <DT> se utiliza para cada término y <DD> para la parte de la definición.     Con <OL START=n> se puede especificar el valor inicial con que se empezará a enumerar la lista. Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 16 . Estas dos últimas etiquetas no llevan etiquetas de cierre. Para la etiqueta <LI> tambien son válidos los atributos tratados anteriormente: <LI TYPE=x START=n>. La etiqueta <UL> dispone de un atributo que permite cambiar la apariencia de la marca que precede a cada elemento de la lista: <UL type=DISC|SQUARE|CIRCLE>. Para identificar la lista se utilizan las etiquetas <DL> </DL>. Las listas de definiciones o un glosario de términos en un documento HTML constan de dos partes: un término y su definición.

 La estructura general de una lista ordenada es la siguiente: <OL TYPE=1|A|a|I|i START=n> <LI> Item <LI> Item <LI> Item </OL>  La estructura general de una lista no ordenada es la siguiente: <UL TYPE=DISC|SQUARE|CIRCLE> <LI> Item <LI> Item <LI> Item </UL> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 17 .Introducción a HTML Listas.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 18 .  La estructura general de una lista de definiciones es la siguiente: <DL> <DT> Término <DD> Definición <DT> Término <DD> Definición </DL> Ing.Introducción a HTML Listas.

<LI> . </OL> <LI> ... number one.... Level three.... number one..... <OL> <LI> . </OL> <LI> . number two. Level one. number two.  La estructura general de una lista anidada es la siguiente: <UL> <LI> . Level two. Level one. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 19 .... </UL> Ing.... number one. Level two..Introducción a HTML Listas.... <OL start="10"> <LI> .. Level two.. number three.

<html> <head><title>Lista ordenada – listaordenada. <li> Pruebas. <li> Publicación.htm</title></head> <body> <h1>MODELO EN CASCADA</h1> <ol> <li> Definición del problema. </ol> </body> </html> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 20 . <li> Mantenimiento.Introducción a HTML Listas(Ejemplos). <li> Diseño de prototipos. <li> Especificación y análisis de requisitos.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 21 . <li> Fotocopia de Cédula de ciudadanía. <li> Fotocopia de Libreta militar. </ul> </body> </html> Ing.htm</title></head> <body> <h3>Documentación requerida para graduarse en el ITC</h3> <ul> <li> Paz y Salvo académico.Introducción a HTML Listas(Ejemplos). <li> Paz y Salvo administrativo. <li> Carnet estudiantil. <html> <head><title>Lista no ordenada – listanoordenada.

<html> <head><title>Lista de Definiciones – listadefiniciones. <dt> WWW <dd> World Wide Web. </dl> </body> </html> Ing. <dt> URL <dd> Universal Resource Locator.htm</title></head> <body> <h3>Glosario</h3> <dl> <dt>HTML <dd> Hyper Text Markup Language.Introducción a HTML Listas(Ejemplos). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 22 .

<li> Jornada nocturna. Ing. <ul type=circle> <li> Jornada diurna. </ul> <li> Contaduría Pública <li>Tecnología en Administración Financiera <ul type=square> <li> Jornada diurna. <li> Jornada nocturna. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 23 .Introducción a HTML Listas(Ejemplos).htm</title></head> <body> <h3>Programas Académicos del ITC</h3> <ul> <li>Tecnología en Sistemas de Información. <html> <head><title>Lista anidada – listaanidada.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 24 .Introducción a HTML Listas(Ejemplos). </ul> </ul> </body> </html> Ing.

La etiqueta <CAPTION> </CAPTION> indica el titulo de la tabla. Las celdas de cabecera aparecen en negrita y las celdas de datos con letra normal. mapas sensibles. Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 25 . Una tabla viene definida por las etiquetas de comienzo y fin <TABLE> y </TABLE>.Introducción a HTML Tablas. El comienzo de una fila de la tabla va marcado con la etiqueta <TR>. Las celdas de una fila pueden ser de dos tipos: de cabecera(<TH>) o de datos(<TD>). debe ir inmediatamente despues de la etiqueta <TABLE>. el uso de </TR> es opcional pero recomendable. Esta etiqueta si se usa. listas. hiperenlaces. respectivamente. imágenes.     Las tablas permiten organizan la informacion(texto. formularios e incluso otra tabla) en celdas organizadas en filas y columnas.

pero indica la alineación vertical. RIGHT y JUSTIFY) y VALIGN(TOP. La etiqueta <CAPTION> tiene un atributo para indicar la posición del título respecto a la tabla: <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT>  La etiqueta <TABLE> tiene unos atributos que permiten un mayor control sobre la misma: <TABLE BORDER=n ALIGN=LEFT|CENTER|RIGHT|JUSTIFY WIDTH=n% CELLPADDING=n CELLSPACING=n >  Las etiquetas <TR>.  Ing. <TD> y <TH> tienen dos atributos comunes: ALIGN(LEFT. BOTTOM).Introducción a HTML Tablas. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 26 . CENTER. MIDDLE. del contenido de un única celda tipo cabecera(<TH>) o de una única celda de datos(TD). El segundo es similar. El primero determina la alineación horizontal de todos los elementos de una fila(<TR>).

El número de columnas de una tabla viene definido por el número de celdas que tenga la fila con mayor número de éstas. de cuerpo(<TBODY>) o de pie(<TFOOT>) de tabla. Las filas se pueden agrupar por filas de cabecera(<THEAD>). Para ello se dispone de los atributos COLSPAN(Nro. se puede dar el mismo aspecto a las filas que pertenecen a uno de los tres grupos. de filas que ocupará una determinada celda). HTML 4. de columnas que ocupará una determinada celda) y ROWSPAN(Nro. Ing. Con los atributos ALIGN y VALIGN que tienen estas etiquetas.Introducción a HTML Tablas. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 27 .     Se pueden definir tablas en las que el número de filas o el número de columnas que ocupe una celda sea distinto al de otra celda.01 facilita el agrupamiento de filas y columnas para definir la estructura de una tabla.

Con estas etiquetas se puede definir a priori el número de columnas que tendrá una tabla. HTML tiene las etiquetas <COL> y <COLGROUP>. si se desea.  La forma normal de definir la estructura de una tabla con estas etiquetas es: <TABLE> <THEAD>Fila o filas del grupo cabecera</THEAD> <TFOOT>Fila o filas del grupo del pie de la tabla</TFOOT> <TBODY>Fila o filas del grupo del cuerpo de la tabla</TBODY> </TABLE>  Para definir el número y tipo o agrupar las columnas de una tabla.Introducción a HTML Tablas. Ing. las columnas se pueden agrupar para darles un aspecto común. Además. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 28 .

htm</title></head> <body> <table border width=60% align=center> <caption align=top><h3> Horario de Atención al Público</h3></caption> <tr align=center><th><th>Lunes<th>Martes<th>Miercoles<th>Jueves<th>Viernes</tr> <tr align=center><th>Mañana<td>10:00 – 2:00<td>----<td>10:00-2:00 <td>10:00-5:00<td>10:00-2:00</tr> <tr align=center><th>Tarde<td>5:00-8:00<td>---<td>5:00-8:00<td>---<td>---</tr> </table> </body> </html> Ing.Introducción a HTML Tablas(Ejemplos). <html> <head><title>Tabla Simple – tablasimple. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 29 .

<html> <head><title>Tabla 2 filas y 3 columnas – tabla2x3.1</td><td>1.3</td> </tr> <tr><td>2.2</td><td>1.1</td><td>2.2</td><td>2.3</td> </tr> </table> </body> </html> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 30 .htm</title></head> <body> <table border=5 align=center> <tr> <td>1.Introducción a HTML Tablas(Ejemplos).

3</td> </tr> <tr><td rowspan=2>2. <html> <head><title>Tabla 3 filas y 3 columnas – tabla3x3.2</td><td>2.1 y 1.2</td><td>3.3</td> </tr> </table> </body> </html> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 31 .3</td> </tr> <tr><td>3.htm</title></head> <body> <table border=1> <tr><td colspan=2>1.2</td><td>1.Introducción a HTML Tablas(Ejemplos).1 y 3.1</td><td>2.

htm</title></head> <body> <table> <caption>cups of coffee consumed by each senator</caption> <tr> <th>name</th> <th>cups</th> <th>type of coffee</th> <th>sugar?</th> <tr> <td>t.Introducción a HTML Tablas(Ejemplos). sexton</td> <td>10</td> <td>espresso</td> <td>no</td> Ing. <html> <head><title>Tabla con celdas combinadas – tablacombinada. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 32 .

Introducción a HTML

Tablas(Ejemplos).
<tr>
<td>j. dinnen</td>
<td>5</td>
<td>decaf</td>
<td>yes</td>
</table>
<p>
<table border="1">
<caption>cups of coffee consumed by each senator</caption>
<tr><th>name<th>cups<th>type of coffee<th>sugar?
<tr><td>t. sexton<td>10<td>espresso<td>no
<tr><td>j. dinnen<td>5<td>decaf<td>yes
<tr><td>a. soria<td colspan="3"><em>not available</em>
</table>
Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco – Cartagena de
Indias

33

Introducción a HTML

Tablas(Ejemplos).
<p>
<table border="1">
<tr><td>1 <td rowspan="2">2 <td>3
<tr><td>4 <td>6
<tr><td>7 <td>8 <td>9
</table>
<p>
<table border="1">
<tr><td>1 <td>2 <td>3
<tr><td colspan="2">4 <td>6
<tr><td>7 <td>8 <td>9
</table>
</body>
</html>
Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco – Cartagena de
Indias

34

Introducción a HTML

Tablas(Ejemplos).
<html>
<head><title>Tabla Agrupada – tablaagrupada.htm</title></head>
<body>
<table width=100% cellpadding=5 cellspacing=10 rules=groups>
<caption>Guía de teléfono. Letra:<b>S</b></caption>
<colgroup span=2 align=left width=40%></colgroup>
<col align=right width=20%>
<thead align=left>
<tr><th>Apellidos <th>Nombre <th> Teléfono
</thead>
<tbody align=left>
<tr><td>Sánchez Alipio<td>María <td> 6664506
<tr><td>Sanz Rodríguez<td>Ana <td> 6564328
<tr><td>Serena González <td>Ruben <td> 6235421
Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco – Cartagena de
Indias

35

Introducción a HTML

Tablas(Ejemplos).
<tr><td>Soriano Pascual <td>Carlos <td>6123548
<tr><td<Soro Sarao <td>Patricia <td>6321456
<tr><td>Soto del Rio <td>Pedro <td>6987452
</tbody>
</table>
</body>
</html>

Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco – Cartagena de
Indias

36

Introducción a HTML

Hiperenlaces.

Un hiperenlace es una conección de un recurso Web(imágenes,
sonidos, videos, documentos HTML) a otro.
Normalmente, los hiperenlaces aparecen subrayados y con un
color distinto al resto del texto. La etiqueta que utiliza HTML
para definir un hiperenlace es <A> </A>(Ancla o anchor). Como
elementos utilizados como hiperenlaces estan el texto y las
imágenes.
Para incluir un hiperenlace de una página a otra se utiliza el
siguiente formato:
<A HREF=“path”> Texto </A>
El “path” es la dirección absoluta o relativa del recurso Web.

Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco – Cartagena de
Indias

37

Una dirección relativa define la ubicación de un archivo.    Una dirección absoluta está formada por el nombre del servidor Web que mantiene la página destino más el nombre de ésta(por ejemplo.htm . Ing./carpetaabc/xyzArchivo. Un hiperenlace a un punto del mismo documento consta de dos partes: una referencia y un destino.Introducción a HTML Hiperenlaces. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 38 .htm). basándose en la ubicación del documento actual./carpetaabc/xyzArchivo../.htm Los hiperenlaces se pueden utilizar para efectuar referencias locales a puntos de la misma página.htm .com/directorio1/pagina1.mydomain. http://www... Los siguientes son ejemplos de direcciones relativas: xyzArchivo.

La forma de definir un hiperenlace a un punto del mismo documento es: <A HREF=“#nombreancla”>Texto del enlace local </A> <A NAME=“nombreancla”> Texto del destino </A>  Los nombres asignados como “nombreancla” deben ser únicos dentro del documento y ser escritos exactamente igual(casesensitive). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 39 .Introducción a HTML Hiperenlaces.  Ing.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 40 . <html> <head><title>Hiperenlaces locales – anclaslocales.htm</title></head> <body> <p><h2 align=center><a name=“principio”>INDICE</A></h2> <ul> <li><a href=“#capitulo1”>Capítulo 1</a> <li><a href=“#capitulo2”>Capítulo 2</a> </ul> <p><h3><a name=“capitulo1”>Capítulo 1</a> <h5><a href=“#principio”>Volver al principio del documento</a></h5> <h3><a name=“capitulo2”>Capítulo 2 </a></h3> <h5><a href=“#principio”>Volver al principio del documento</a></h5> </body> </html> Ing.Introducción a HTML Hiperenlaces(Ejemplos).

com/products/buddy.anclasabsolutas.webdesignref.democompany. <html> <head><title>Anclas absolutas a otras páginas . Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 41 .com”>Link 2</a> </ul> </body> </html> Ing.htm>Link1</a> <li><a href=“http://www.htm </title></head> <body> <p><h2 align=center>INDICE</h2> <ul> <li><a href=“http://www.Introducción a HTML Hiperenlaces(Ejemplos).

<html> <head><title>Anclas relativas a otras páginas – anclasrelativas. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 42 .htm</title></head> <body> <p><h2 align=center>INDICE</h2> <ul> <li><a href=“capitulo1.htm”>Capitulo 2</a> </ul> </body> </html> Ing.htm”>Capitulo 1</a> <li><a href=“capitulo2.Introducción a HTML Hiperenlaces(Ejemplos).

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 43 .Introducción a HTML Hiperenlaces(Ejemplos).htm”>Volver a la página principal</a> </body> </html> Ing. <html> <head><title>Capitulo 1</title></head> <body> <p><h2 align=center>Capitulo 1</h2> <a href=“anclasrelativas.htm”>Volver a la página principal</a> </body> </html> <html> <head><title>Capitulo 2</title></head> <body> <p><h2 align=center>Capitulo 2</h2> <a href=“anclasrelativas.

Introducción a HTML Imágenes y objetos.     Para incluir gráficos e imágenes se debe utilizar la etiqueta <IMG> de la siguiente manera: <IMG SRC=“archivografico" ALT="descripcion"> Donde SRC=“archivografico” indica la ubicación. nombre del archivo y formato del gráfico(gif. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 44 . aunque opcionales. jpg.0" WIDTH=88 HEIGHT=31> Ing. conviene indicar siempre: la altura(HEIGHT) y la anchura(WIDTH) del gráfico en pixels. El atributo ALT=“descripción” especifica el texto que se mostrará en aquellos browsers que no sean capaces de mostrarlos o en el supuesto que el usuario los haya desactivado. Existen dos atributos que.gif" ALT="Netscape 4. png). <IMG SRC="graficos/dwnldns.

0" WIDTH=88 HEIGHT=31></A>  Por defecto los browsers le colocaran un borde al gráfico para indicar que es un hiperenlace. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 45 .netscape.gif" ALT="Netscape 4.  Para poder alinear correctamente texto y gráficos se debe utilizar el atributo ALIGN de la siguiente manera: <IMG SRC=“archivografico” ALIGN=LEFT|RIGHT|TOP|MIDDLE|BOTTOM>Texto  Las imágenes también se pueden utilizar para crear hiperenlaces gráficos a otros documentos.com"> <IMG SRC="graficos/dwnldns.Introducción a HTML Imágenes y objetos.gif” BORDER=12> Ing. Por medio del atributo BORDER podremos alterar el grosor de ese borde o eliminarlo colocandolo a cero: <IMG SRC=“dog. Todo lo que se requiere hacer es que la etiqueta <IMG> aparezca entre las etiquetas <A> </A> como se muestra: <A HREF="http://www.

Tradicionalmente han existido dos tipos de mapas de imágenes: los gestionados por el cliente(browser) y los gestionados por el servidor. etc). correr un programa.Introducción a HTML Imágenes y objetos. Ing. <IMG SRC=“dog1. recuperar un documento. Cuando la región es activada por el usuario la acción es ejecutada. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 46 .gif” ALIGN=LEFT HSPACE=50 VSPACE=10>   Los mapas de imágenes permiten especificar regiones y asignarle una acción a cada una de ellas(por ejemplo.  Para controlar la cantidad de espacio en blanco alrededor de las imágenes se utilizan las siguientes etiquetas: VSPACE(espacio en blanco por arriba o debajo de la imagen) y HSPACE(espacio en blanco a la izquierda o derecha de la imagen).

xN.Introducción a HTML Imágenes y objetos. top-y.   Para utilizar los mapas de imágenes gestionados por el cliente se requieren dos cosas: declarar el mapa y asignarlo a una imagen.n. radius) y POLY(x1. yn). x2.. right-x.. Para declarar el mapa: <MAP NAME=“nombremapa”> <AREA SHAPE=DEFAULT|RECT|CIRCLE|POLY COORDS=“n.... y1.. USEMAP="#nombremapa"> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 47 . CIRCLE(center-x. .” HREF=“URL” NOHREF ALT=“texto”>   El número y significado de las coordenadas especificadas en COORDS dependerá de la forma del área: RECT(left-x.. Para asignar un mapa a una imagen: <IMG SRC=.. bottom-y). center-y. y2.

24. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 48 .htm</title> <body> <map name="navegadores"> <area shape=rect coords="0.0.microsoft.31" href="http://www.31" href="http://www.53.com" alt="microsoft"> <area shape=default nohref alt="nada"> </map> <img src="nav. <html> <head><title>mapas sensibles – mapas.netscape.gif" width=53 height=31 border=0 usemap="#navegadores"> </body></html> Ing.0.com" alt="netscape"> <area shape=rect coords="26.Introducción a HTML Imágenes y objetos(Ejemplos).

gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=MIDDLE Ing.0" width=88 height=31>Este es el texto con ALIGN=TOP <p> <img align=middle src="dwnldns.gif" alt="netscape 4.0" width=88 height=31></a> <h3>Alineación del texto y gráficos</h3> <p> <img align=top src="dwnldns.Introducción a HTML Imágenes y objetos (Ejemplos). <html> <head><title>Imágenes – imagenes.htm</title></head> <body> <p>La siguiente es un vínculo como imagen: <a href="http://www.netscape.gif" alt="netscape 4.com"><img src="dwnldns. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 49 .

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 50 .0" width=88 height=31 hspace=50 vspace=50>Este es el texto con HSPACE=50 VSPACE=50 </body> </html> Ing.0" width=88 height=31>Este es el texto con ALIGN=RIGHT <p> <img align=left src="dwnldns.0" width=88 height=31>Este es el texto con ALIGN=LEFT <p> <img align=middle src="dwnldns.gif" alt="netscape 4.gif" alt="netscape 4. <p> <img align=bottom src="dwnldns.gif" alt="netscape 4.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=BOTTOM <p> <img align=right src="dwnldns.Introducción a HTML Imágenes y objetos (Ejemplos).

Esta página se denomina documento de definición de marcos.    Los marcos(frames) permiten dividir la ventana del navegador en varias partes. Esto permite presentar documentos en múltipes vistas. las cuales pueden ser ventanas independientes o subventanas. En éste. separado por comas.Introducción a HTML Marcos. se define el número de marcos y el tamaño de cada uno. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 51 . de forma que en cada una de ellas puede mostrarse una página HTML distinta. En una página que contiene marcos se sustituye la etiqueta <BODY> por la etiqueta <FRAMESET>. En cada <FRAMESET> se divide la ventana actual(sea la general o un marco) en varias ventanas definidas por los atributos COLS ó ROWS. Ing.

COLS=“*.50%”> Ing. Este último caso indica que la fila o la columna en cuestión ocupará el resto de la ventana del navegador.70%”. Un ejemplo del uso de estos atributos es el siguiente: <FRAMESET ROWS=“30%. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 52 . El ejemplo anterior es equivale a: <FRAMESET ROWS=“30%.*”> ó <FRAMESET ROWS=“30%. absolutos(píxeles) o con * . el tamaño restante de la ventana se divide en partes iguales. Si hay más deun * seguido en ROWS o COLS.Introducción a HTML Marcos.   El atributo ROWS indica el número de filas en las que se divide la ventana del navegador y tamaño de las mismas y COLS para las columnas.70%”.*”. COLS=“50%. COLS=“*.50%”> Los valores que se pueden asignar a los atributos ROWS y COLS pueden ser de tres tipos: relativos al tamaño total de la ventana del navegador(n%).

La etiqueta <FRAME> permite indicar que página HTML debe cargarse en cada uno de los marcos. Ing. SRC indica la dirección del documento HTML que ocupará el marco. Su estructura general es la siguiente: <FRAME NAME=“marco1” SRC=“URL” SCROLLING=“AUTO|YES|NO” NORESIZE FRAMEBORDER=1|0 MARGINWIDTH=n MARGINHEIGHT=n >  El atributo NAME permite asignarle un nombre a un marco.Introducción a HTML Marcos. las vistas son creadas de izquierda a derecha para la primera fila. etc.   Los marcos son creados de izquierda a derecha para las columnas y de arriba hacia abajo para las filas. Cuando ambos atributos son especificados. de izquierda a derecha para la segunda fila. SCROLLING permite indicar si se colocan o no las barras de desplazamiento al marco. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 53 .

..   NORESIZE indica que no se puede cambiar el tamaño del marco.contenido del tercer marco </FRAMESET> Ing.contenido del segundo marco.34%”> . FRAMEBORDER indicara si el marco lleva o no un borde..Introducción a HTML Marcos.. MARGINWIDTH permite cambiar los márgenes horizontales de un marco(se especifica en píxeles) y MARGINHEIGHT permite cambiar los márgenes verticales....contenido del segundo marco. Los marcos se pueden anidar.. <FRAMESET cols=“33%. es decir. primera fila . segunda fila </FRAMESET> .33%. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 54 . 50%”> .contenido del primer marco <FRAMESET rows=“40%. dentro de un <FRAMESET> puede aparecer otro <FRAMESET>.

_self(muestra la nueva página en el mismo marco desde el que se le invoca y _parent(para que se cargue en el marco padre(<FRAMESET>) que contiene el marco desde el que se le invoca.Introducción a HTML Marcos. la nueva página se abrirá en ese mismo marco. _blank(muestra la nueva página en una ventana nueva del navegador).html” TARGET=“principal”> Existen cuatro valores especiales que se pueden asignar al atributo TARGET: _top(elimina todos los marcos existentes y muestra en la ventana original). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 55 . Para indicar en que marco se abrirá un hiperenlace se utiliza el atributo TARGET de las etiquetas <A>. Una aplicación de esto es: <A HREF=“pagina.   Por defecto. si pulsamos sobre un enlace definido en un marco. <AREA> y <FORM>. Ing.

  Para especificar el contenido para aquellos browsers que no soportan marcos se utilizan las etiquetas <NOFRAMES> </NOFRAMES>. Existe un último tipo de marco que sirve para mostrar el contenido de una página HTML en una pequeña ventana que se inserta dentro de otra página HTML. Ing. A esto se le conoce como marcos interactivos y la etiqueta que se utiliza para declararlos es <IFRAME> </IFRAME>.Introducción a HTML Marcos. Este etiqueta puede ser usada al final de la seccion <FRAMESET> del documento. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 56 .

cols="33%.htm"> <frame src="capitulo1.htm"> <frame src="listaordenada.33%"> <frame src="mapas.htm"> <frame src="listanoordenada. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 57 .htm"> Ing.34%.htm"> <frame src="tabla2x3.Introducción a HTML Marcos(Ejemplos).htm</title></head> <frameset rows="50%. <html> <head><title>Ventana con dos marcos – 2marcos.70%".htm"> <frame src="listadefiniciones.htm"> <frame src="tablasimple.htm"> </frameset> </html> <html> <head><title>Ventana con 6 marcos</title></head> <frameset rows="30%.50%"> <frame src="anclaslocales.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 58 .htm</title></head> <frameset cols="20%. </frameset> </html> <html> <head><title>Ventana con tres marcos – 3marcos.259"> <frame src="anclaslocales.htm"> </frameset> <frame src="clientes.Introducción a HTML Marcos(Ejemplos).htm"> <frame src="capitulo1.jpg"> </frameset> </html> Ing.80%"> <frameset rows="302.

htm"> <frame src="capitulo1. Si está leyendo esta frase es porque su navegador no los admite. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 59 . cols="*.htm"> <noframe> Esta página contiene marcos.htm"> <frame src="capitulo2.htm</title></head> <frameset rows="30%.*".htm"> <frame src="listaanidada. </noframe> </frameset> </html> Ing. <html> <head><title>Ventana con cuatro marcos – 4marcos.Introducción a HTML Marcos(Ejemplos).*"> <frame src="anclaslocales.

Introducción a HTML Marcos(Ejemplos).htm. En caso de no verlo. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 60 .htm</title></head> <body> En esta pantalla aparecerá un marco interactivo con la información contenida en losmasvendidos. pulse aquí <a href="losmasvendidos. <html> <head><title>Ejemplo de marco interactivo – marcointeractivo. </body> </html> Ing. <p> <iframe src="losmasvendidos. podrá acceder a la información de esta página a través del enlace.htm">Los mas vendidos</a> </iframe> <hr> Este texto se ha insertado después de la declaración del marco interactivo.htm" width=60% height=200 scrolling="auto" align="right" frameborder=1> Para ver los más vendidos.

htm</title></head> <body> <h2 align="center">Lista de autores más solicitados</h2> <hr> <ul> <li>Yono Escribolibros <li>Nokita Unacoma <li>Boni Topalabro <li>Poe Manorrima <li>Josechu Patintas </ul> </body> </html> Ing.Introducción a HTML Marcos(Ejemplos). <html> <head><title>Los mas vendidos – losmasvendidos. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 61 .

htm"> </frameset> </frameset> </html> Ing.Introducción a HTML Marcos(Ejemplos). <html> <head><title>Marcos anidados – marcosanidados.jpg"> <frame src="listaanidada. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 62 .*"> <frame src="anclaslocales.htm" frameborder=0 > <frameset rows="40%.*"> <frame src="itclogobig.htm</title></head> <frameset cols="30%.

htm" name="marco2"> </frameset> </html> <html> <body> <h1 align=center>Opciones de Target – targetmarco.htm" target="_target">Pagina en una nueva ventana del navegador</a> <li><a href="tablasimple.htm" target="marco2">Página en el segundo marco de este documento</a> Ing. <html> <head><title>Uso del target – targetindex.Introducción a HTML Marcos(Ejemplos).70%"> <frame src="targetindex.htm" name="marco1"> <frame src="paginavacia.htm</title></head> <frameset cols="30%.htm</h1> <p> <ol> <li><a href="tablasimple. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 63 .

Introducción a HTML Marcos(Ejemplos).jpg" marginwidth=20 marginheight=20 noresize> </frameset> <frame src="capitulo1.htm" frameborder=0> <frame src="listaordenada.33%"> <frameset rows="*.htm" target="_top">Página en ventana completa</a> <li><a href="tablasimple. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 64 .200"> <frame src="tabla2x3.htm" target="_self">Página en este mismo marco</a> </ol> </body> </html> <html> <head><title>Uso de los atributos de los marcos – attmarco.33%. <li><a href="tablasimple.htm</title></head> <frameset cols="33%.htm" frameborder=0> </frameset> </html> Ing.htm" scrolling="no"> <frame src="itclogosmall.

01. La etiqueta <FONT> dispone de cuatro atributos básicos: FACE. Los siguientes son ejemplos válidos del uso de <FONT>: <FONT FACE=“Arial”>Esto es importante</FONT> <FONT FACE=“Arial.Introducción a HTML Otros tags(<Font>). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 65 . en vez de ella se utilizan las etiquetas CSS. El atributo FACE permite indicar el nombre de la fuente o de la familia de fuentes. COLOR y STYLE. SIZE define el tamaño ralativo a un tipo de fuente mediante un número de 1 a 7 y COLOR permite especificar el color de texto en un valor hexadecimal o un nombre válido de color. SIZE. Helvetica.    La etiqueta <FONT> </FONT> es obsoleta en HTML 4. Sans serif”>Este texto se mostrará en una fuente distinta</FONT> Ing.

 El atributo FACE permite especificar como tamaño de la fuente un número entre 1 a 7. no es posible especificar <FONT SIZE=“+10”> porque sólo existen siete tamaños.Introducción a HTML Otros tags(<Font>). si a este número se le antepone los signos + ó .. Ing. podrá utilizar valores que pertenezcan a los rangos +1 a +6 y –1 a -6. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 66 . permite aumentar o disminuir el tamaño el número especificado de veces. Los siguientes son ejemplos válidos del uso de este atributo: <font size=1>size=1</font> <font size=-4>size=-4</font> <font size=+2>size=+2</font>  Para este tipo de empleo del atributo SIZE. Por ejemplo.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 67 .Introducción a HTML Otros tags(<Font>).  En la siguiente tabla se muestra la equivalencia entre los valores asignados al atributo SIZE y el tamaño en puntos: <FONT SIZE=n> TAMAÑO NORMAL EN PUNTOS 1 8 2 10 3 12 4 14 5 18 6 24 7 36 Ing.

Introducción a HTML Otros tags(<Font>). lime(#00FF00). Comic Sans. Times New Roman. gray(#808080). yellow(#FFFF00). maroon(#800000). teal(#008080). aqua(#00FFFF). silver(#C0C0C0). navy(#000080). olive(#808000). Symbol. white(#FFFFFF). Impact. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 68 . fucsia(#FF00FF). Los siguientes son ejemplos válidos del uso de este atributo: <FONT COLOR=“red”>Esto es importante</FONT> <FONT COLOR=“#FF0000”>Esto es importante</FONT> Ing. purple(#800080).    Algunos de los nombres de fuentes para plataformas y exploradores de Microsoft: Arial. Lucida Sans Unicode. Tahoma. green(#008000). Georgia. Courier New. Algunos de valores y nombres válidos para el COLOR son los siguientes: black(#000000). blue(#0000FF). Verdana y Wingdings. red(#FF0000).

el color o el tipo de la fuente en todo el documento. y se debe emplear una única vez en todo el documento.Introducción a HTML Otros tags(<Font>). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 69 . FACE y SIZE. Helvetica” size=6></head> Ing. se debe utilizar el elemento <BASEFONT> en la zona <HEAD> del documento.  En ciertos casos. Para ello. <BASEFONT> permite el empleo de los atributos COLOR. El siguiente es un ejemplo válido del uso de este atributo: <head><basefont color=“red” face=“Arial. puede ser adecuado modificar el tamaño.

ALINK define el color del vínculo cuando se está haciendo clic sobre él y VLINK define el color de un vínculo después de haber sido visitado.  La etiqueta <BODY> </BODY> dispone de los siguientes atributos que permiten modificar el color en un página Web: BGCOLOR para definir el color de fondo que se utilizará en toda la página. A continuación se muestra un ejemplos válidos del uso de estos atributos: <body bgcolor=“#000000” text=“white” link=“#000099” alink=“#FF0000” vlink=“#FF0000”> <body background=“imágenes/background.Introducción a HTML Otros tags(<Body>).gif”> Ing. TEXT para definir el color predeteminado para el texto contenido en la página. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 70 . LINK para definir el color predeterminado de los hiperenlaces no visitados. BACKGROUND para indicar una imagen de fondo para una página Web.

 A las tablas puede asignárseles colores de fondo de varias formas. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 71 . <table border=“1” cellspacing=0 cellpadding=8” bgcolor=“green”> <tr><th bgcolor=“lightblue”>A</th></tr> <tr bcolor=“orange”><td>b</td></tr> <tr><td bgcolor=“red”>C</td></tr> Ing. <TR>. El atributo BGCOLOR es válido para <TABLE>. <TH> y <TD>.Introducción a HTML Otros tags(<Table>).

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 72 .htm</title></head> <body> <font face="Arial">Arial</font><br> <font face="Arial Black">Arial Bold</font><br> <font face="Arial Black"><I>Arial Bold Italic</I></font><br> <font face="Comic Sans MS">Comic Sans MS</font><br> <font face="Courier New">Courier New</font><br> <font face="Georgia">Georgia</font><br> <font face="Impact">Impact</font><br> <font face="Lucida Console">Lucida</font><br> <font face="Marlett">Marlett</font>(Marlett)<br> <font face="Symbol">Symbol</font>(Symbol)<br> <font face="Tahoma">Tahoma</font><br> <font face="Times New Roman">Times New Roman</font><br> Ing. <html> <head><title>Empleo de Fuentes – fuentes.Introducción a HTML Otros tags(Ejemplos).

charter. Helvética. <font face="Verdana">Verdana</font><br> <font face="wingdings">Wingdings</font>(Windgdings)<br> <font face="desconocida">Esto sale con el tipo de fuente por defecto</font><br> <font face="chicago.Introducción a HTML Otros tags(Ejemplos). Palatino. Times">Esto sale en el primer tipo de fuente que este instalada</font><br> <P><font size=1>size=1</font> <font size=2>size=2</font> <font size=3>size=3</font> <font size=4>size=4</font> <font size=5>size=5</font> <font size=6>size=6</font> <font size=7>size=7</font> <P><font size=-4>size=-4</font> <font size=-3>size=-3</font> <font size=-2>size=-2</font> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 73 .

<font size=-1>size=-1</font> <font size=+1>size=+1</font> <font size=+2>size=+2</font> <font size=+3>size=+3</font> <font size=+4>size=+4</font> <br><font color="#0000FF">AZUL</font><br> <font color="#A52A2A">MARRON</font><br> <font color="#00FFFF">CYAN</font><br> <font color="#808080">GRAY</font><br> <font color="#008000">GREEN</font><br> <font color="#FF00FF">MAGENTA</font><br> <font color="#000080">NAVY</font><br> <font color="#FFA500">ORANGE</font><br> <font color="aliceblue">ALICEBLUE</font><br> <font color="chocolate">CHOCOLATE</font><br> Ing.Introducción a HTML Otros tags(Ejemplos). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 74 .

<font color="coral">CORAL</font><br> <font color="darkturquoise">DARKTURQUOISE</font><br> <font color="orange">ORANGE</font><br> <font color="indigo">INDIGO</font><br> <font color="black">T<font color="blue">U<font color="green">T <font color="brown">T<font color="fuchsia">I<font color="cyan">F <font color="navy">R<font color="indigo">U<font color="gold">T <font color="silver">T<font color="skyblue">I</font> </body> </html> Ing.Introducción a HTML Otros tags(Ejemplos). Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 75 .

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 76 .Introducción a HTML Otros tags(Ejemplos).htm</title> <basefont face="Arial. <html> <head> <title>Empleo de Fuentes – fuentes2. </body> </html> Ing. Helvetica" color="blue" size=5> </head> <body> <p align="center">Este texto sale del mismo color en todo el documento.

Introducción a HTML Otros tags(Ejemplos). <html> <head> <title>Empleo de Colores – fondocolor.htm">Lista definiciones</a><br> <a href="textoconformato. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 77 .htm </title> </head> <body bgcolor="lightblue" text="black" link="navy" alink="yellow" vlink="red"> <h1 align="center">HIPERENLACES</h1> <p> <a href="losmasvendidos.htm">Texto con formato</a> </body> </html> Ing.htm">Lista de autores más solicitados</a><br> <a href="listadefiniciones.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 78 .htm </title> </head> <body background="itclogobig. <html> <head> <title>Empleo de Imagen de fondo – fondoimg.Introducción a HTML Otros tags(Ejemplos).jpg"> </body> </html> Ing.

Introducción a HTML Otros tags(Ejemplos). <html> <head> <title>Empleo de color en las tablas – tablacolor.htm </title> </head> <body> <table align="center" border="1" cellspacing="0" cellpadding=8" bgcolor="green"> <tr> <th bgcolor="lightblue">A</th> <th bgcolor="lightblue">A</th> <th bgcolor="lightblue">A</th> </tr> <tr bgcolor="orange"> <td>B</td> <td>B</td> <td>B</td> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 79 .

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 80 . </tr> <tr> <td bgcolor="red">C</td> <td bgcolor="white">C</td> <td bgcolor="blue">C</td> </tr> <tr> <td>D</td> <td>D</td> <td>D</td> </tr> </table> </body> </html> Ing.Introducción a HTML Otros tags(Ejemplos).

también se puede escribir como &frac12..(Por ejemplo. Las entidades nombradas son sinónimos para poder recordar con mayor facilidad estos caracteres. por ejemplo. Ing.Introducción a HTML Otros tags(Caracteres especiales y reservados). &#189. Las entidades numeradas se especifican encerrando un código entre los signos &# y .    Se deben utilizar entidades nombradas o numeradas cuando se necesite un carácter especial o reservado en el texto del documento. . &#189. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 81 . Así.).

&Eacute. é. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 82 . Á. Ú &iquest. Í. ® &nbsp. (espacio en blanco que no puede ser usado para saltar de línea) &trade. CODIGO RESULTADO &aacute.. º &ordf. ¿ &iexcl. ¡ &ordm. &eacute.. ó.Introducción a HTML Otros tags(Caracteres especiales y reservados). á.. &Aacute.. É.. ú. í. Ó.. ™ Ing. ª &copy.. © &reg.

& &quot. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 83 . < &gt.Introducción a HTML Otros tags(Caracteres especiales y reservados). CODIGO RESULTADO &lt. “ Ing. > &amp.

Helvetica"><font size=+2>CARACTERES ESPECIALES Y RESERVADOS</font></font></b></caption> <tr> <td> <center><b><font face="Arial. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 84 .Helvetica"><font size=+1>CODIGO</font></font></b></center> </td> <td> <center><b><font face="Arial.Helvetica"><font size=+1>RESULTADO</font></font></b></center></td></tr> Ing. <html> <head><title>Caracteres especiales y reservados caracteresespeciales.htm</title></head> <body> <center><table BORDER COLS=2 WIDTH="100%" > <caption><b><font face="Arial.Introducción a HTML Otros tags(Ejemplos).

</td> <td>&iexcl.iquest. &iacute.. <tr> <td>&amp.Introducción a HTML Otros tags(Ejemplos).. &amp.... &eacute. &Uacute.</td> </tr> Ing.Eacute. &uacute.iexcl. &Oacute.. &Aacute...aacute. &amp.. &Iacute.. &Eacute.</td> </tr> <tr> <td>&amp... &oacute. &amp..</td> <td>&iquest..eacute..Aacute.</td> </tr> <tr> <td>&amp.. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 85 .</td> <td>&aacute.

Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 86 .</td> </tr> <tr> <td>&amp.</td> <td>&ordf.reg.</td></tr> Ing.ordm.Introducción a HTML Otros tags(Ejemplos).</td> <td>&ordm.</td> <td>&reg.copy.ordf.</td> </tr> <tr> <td>&amp.</td> </tr> <tr> <td>&amp. <tr> <td>&amp.</td> <td>&copy.

</td> </tr> <tr> <td>&amp.trade.nbsp.gt.lt.</td> <td>™&nbsp.</td> Ing. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 87 . para saltar de l&iacute.</td> <td>&lt. <tr> <td>&amp.</td> <td>(espacio en blanco que no puede ser usado&nbsp.Introducción a HTML Otros tags(Ejemplos).</td> </tr> <tr> <td>&amp.nea)</td> </tr> <tr> <td>&amp.

amp.</td> <td>“&nbsp.</td> </tr> <tr> <td>&amp.#164.Introducción a HTML Otros tags(Ejemplos).</td> <td>&curren.</td> <td>&amp.quot. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 88 .</td> </tr> Ing. <td>></td> </tr> <tr> <td>&amp.</td> </tr> <tr> <td>&amp.

</td> <td>&#234.</td> </tr> <tr> <td>&amp.Introducción a HTML Otros tags(Ejemplos).#234. <tr> <td>&amp.</td> </tr> <tr> <td>&amp. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 89 .#235.#239.</td> <td>&#235.</td> </tr> </table></center> </body> </html> Ing.</td> <td>&#239.

imágenes y mapas sensibles. tablas. video. • Los documentos HTML se escriben en texto plano(ASCII) y consisten en un conjunto de etiquetas(tags) encerradas entre los símbolos < y >..Introducción a HTML Resumen. • El lenguaje HTML se utiliza para escribir las páginas Web. con enlaces que conducen a otros documentos o recursos Web(imágenes. Fabio García Ramírez Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 90 . <HTML></HTML>). Ing. listas. los hiperenlaces. audio. Está basado en el concepto de hipertexto(texto presentando de forma estructurada y agradable. • En un documento HTML se destacan dos secciones: el encabezado(<HEAD></HEAD>) y el cuerpo(<BODY></BODY>). • Entre los principales elementos que se pueden encontrar en un documento HTML están: formato de texto. marcos entre otros..(ejemplo. para los cuales existen las etiquetas respectivas.otros).