Html
-
Upload
fabio-garcia-ramirez -
Category
Documents
-
view
5.521 -
download
0
description
Transcript of Html
1
Introducción a HTML
Ing. Fabio García Ramirez([email protected])Seminario de Tecnologìa de Punta – VI SemestreTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 2
Objetivo
Conocer y aplicar el HTML como lenguaje base para el desarrollo de páginas Web.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 3
Temática El lenguaje HTML. Tags básicos. Formato de texto. Listas. Tablas. Hiperenlaces Imágenes y objetos. Marcos. Otros tags.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 4
El lenguaje HTML. HTML(Hyper Text Markup Language, Lenguaje de Marcado de
Hipertexto). El hipertexto es un texto presentado de forma estructurada y
agradable, con enlaces que conducen a otros documentos o fuentes de información, y con elementos multimedia insertados en él(gráficos, sonido, etc).
Se originó a partir del SGML(Standard Generalized Markup Language, Lenguaje Estandarizado y Generalizado de Marcado).
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.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 5
El lenguaje HTML. Es un lenguaje interpretado. Consiste en una serie de etiquetas(tags) encerradas entre los
símbolos <tag>. Casi todas las etiquetas constan de dos marcas, una de apertura y otra de cierre; esta última tiene asignado el mismo nombre que la de apertura, excepto que debe ir precedida del símbolo / . ( por ejemplo, <B> y </B>).
Las etiquetas definidas por HTML no son visibles para el usuario, sólo se observa el efecto de las marcas sobre los elementos a los que caracterizan.
En la página Web http://www.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.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 6
Tags básicos. Un documento HTML consta de tres secciones: una linea donde
se indica la versión de HTML utilizada(<!DOCTYPE>), la cabecera(delimitada por las etiquetas <HEAD> y </HEAD> y el cuerpo(delimitado por las etiquetas <BODY> y </BODY>).
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.
Si se incluye la version de HTML utilizada, 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.01//EN”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 7
Tags básicos. Para incluir comentarios se utilizan las etiquetas <!-- -->.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!– Archivo paginavacia.htm -->
<html>
<head>
<title>Página Vacía</title>
<!-- Información de la cabecera de la página -->
</head>
<body>
<!-- Información del cuerpo de la página -->
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 8
Formato de texto. Es el elemento más habitual de una página HTML. 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, teniendo en cuenta que no cortan las palabras.
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>. La utilización de la etiqueta de cierre </P> es opcional.
La etiqueta <BR> introduce un salto de línea. La diferencia con <P>, es que esta última genera una separación mayor que <BR>.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 9
Formato de texto. 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>), el espesor o grueso de la linea con SIZE(<HR SIZE=xx>, en donde xx se da en pixeles o puntos de la pantalla), el ancho de la linea con WIDTH(<HR WITDH=xx>, 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>).
<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, es decir, en la presentación final se respetan los espacios, la justificación y los saltos de línea que se emplearon en el documento original.
<PRE> texto formateado con espacios </PRE>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 10
Formato de texto. Cuando se necesiten titulos o cabeceras de diferentes tamaños se
utilizan las etiquetas <H1>, <H2>, <H3>, <H4>, <H5> y <H6> con sus respectivas marcas de cierre. La primera es la cabecera de mayor tamaño y la última la menor.
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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 11
Formato de texto(Ejemplo).<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.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. Además, varios blancos seguidos aparecen exactamente igual.
</PRE>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 12
Formato de texto(Ejemplo).<P ALIGN = CENTER> Párrafo de texto <BR>
marcado con P, centrado <BR>
y con cambios de línea generados con BR. <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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 13
Formato de texto(Ejemplo).
<H4> TITULO </H4>
<H5> TITULO </H5>
<H6> TITULO </H6>
<ADDRESS>Cartagena de Indias </ADDRESS>
<EM> Texto enfatizado </EM>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 14
Listas. HTML ofrece varios mecanismos para elaborar listas de
informacion, las cuales pueden contener elementos de los siguientes tipos: ordenados, no ordenados y definiciones.
Las listas ordenadas muestran un conjunto de elementos o sucesos con un orden estricto. Se crean con los pares de etiquetas <OL> </OL>.
Las listas no ordenadas muestran un conjunto de elementos relacionados entre sí, pero sin ningún orden. Se crean con los pares de etiquetas <UL> </UL>.
En las dos listas anteriores, los elementos son sangrados(tabulados) automáticamente y deben ser precedidos por la etiqueta <LI> sin etiqueta de cierre.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 15
Listas. HTML permite anidar listas, lo cual significa que un elemento de
una lista puede ser a su vez otra lista. 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,2,3...
A Letras mayúsculas A,B,C...
a Letras minúsculas a,b,c...
I Nros romanos mayúsculas I, II, III...
i Nros romanos minúsculas i, ii, iii...
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 16
Listas. Con <OL START=n> se puede especificar el valor inicial con
que se empezará a enumerar la lista. 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>.
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. Para identificar la lista se utilizan las etiquetas <DL> </DL>. La etiqueta <DT> se utiliza para cada término y <DD> para la parte de la definición. Estas dos últimas etiquetas no llevan etiquetas de cierre.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 17
Listas. 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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 18
Listas. 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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 19
Listas. La estructura general de una lista anidada es la siguiente:<UL>
<LI> ... Level one, number one...
<OL>
<LI> ... Level two, number one...
<LI> ... Level two, number two...
<OL start="10">
<LI> ... Level three, number one...
</OL>
<LI> ... Level two, number three...
</OL>
<LI> ... Level one, number two...
</UL>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 20
Listas(Ejemplos).<html>
<head><title>Lista ordenada – listaordenada.htm</title></head>
<body>
<h1>MODELO EN CASCADA</h1>
<ol>
<li> Definición del problema.
<li> Especificación y análisis de requisitos.
<li> Diseño de prototipos.
<li> Pruebas.
<li> Publicación.
<li> Mantenimiento.
</ol>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 21
Listas(Ejemplos).<html>
<head><title>Lista no ordenada – listanoordenada.htm</title></head>
<body>
<h3>Documentación requerida para graduarse en el ITC</h3>
<ul>
<li> Paz y Salvo académico.
<li> Paz y Salvo administrativo.
<li> Fotocopia de Cédula de ciudadanía.
<li> Fotocopia de Libreta militar.
<li> Carnet estudiantil.
</ul>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 22
Listas(Ejemplos).<html>
<head><title>Lista de Definiciones – listadefiniciones.htm</title></head>
<body>
<h3>Glosario</h3>
<dl>
<dt>HTML
<dd> Hyper Text Markup Language.
<dt> WWW
<dd> World Wide Web.
<dt> URL
<dd> Universal Resource Locator.
</dl>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 23
Listas(Ejemplos).<html>
<head><title>Lista anidada – listaanidada.htm</title></head>
<body>
<h3>Programas Académicos del ITC</h3>
<ul>
<li>Tecnología en Sistemas de Información.
<ul type=circle>
<li> Jornada diurna.
<li> Jornada nocturna.
</ul>
<li> Contaduría Pública
<li>Tecnología en Administración Financiera
<ul type=square>
<li> Jornada diurna.
<li> Jornada nocturna.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 24
Listas(Ejemplos).</ul>
</ul>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 25
Tablas. Las tablas permiten organizan la informacion(texto, imágenes,
mapas sensibles, hiperenlaces, listas, formularios e incluso otra tabla) en celdas organizadas en filas y columnas.
Una tabla viene definida por las etiquetas de comienzo y fin <TABLE> y </TABLE>, respectivamente.
El comienzo de una fila de la tabla va marcado con la etiqueta <TR>; el uso de </TR> es opcional pero recomendable. Las celdas de una fila pueden ser de dos tipos: de cabecera(<TH>) o de datos(<TD>). Las celdas de cabecera aparecen en negrita y las celdas de datos con letra normal.
La etiqueta <CAPTION> </CAPTION> indica el titulo de la tabla. Esta etiqueta si se usa, debe ir inmediatamente despues de la etiqueta <TABLE>.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 26
Tablas. 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>, <TD> y <TH> tienen dos atributos comunes: ALIGN(LEFT, CENTER, RIGHT y JUSTIFY) y VALIGN(TOP, MIDDLE, BOTTOM). El primero determina la alineación horizontal de todos los elementos de una fila(<TR>), del contenido de un única celda tipo cabecera(<TH>) o de una única celda de datos(TD). El segundo es similar, pero indica la alineación vertical.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 27
Tablas. 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. Para ello se dispone de los atributos COLSPAN(Nro. de columnas que ocupará una determinada celda) y ROWSPAN(Nro. de filas que ocupará una determinada celda).
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.
HTML 4.01 facilita el agrupamiento de filas y columnas para definir la estructura de una tabla. Las filas se pueden agrupar por filas de cabecera(<THEAD>), de cuerpo(<TBODY>) o de pie(<TFOOT>) de tabla.
Con los atributos ALIGN y VALIGN que tienen estas etiquetas, se puede dar el mismo aspecto a las filas que pertenecen a uno de los tres grupos.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 28
Tablas. 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, HTML tiene las etiquetas <COL> y <COLGROUP>. Con estas etiquetas se puede definir a priori el número de columnas que tendrá una tabla. Además, si se desea, las columnas se pueden agrupar para darles un aspecto común.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 29
Tablas(Ejemplos).<html>
<head><title>Tabla Simple – tablasimple.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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 30
Tablas(Ejemplos).<html>
<head><title>Tabla 2 filas y 3 columnas – tabla2x3.htm</title></head>
<body>
<table border=5 align=center>
<tr> <td>1,1</td><td>1,2</td><td>1,3</td>
</tr>
<tr><td>2,1</td><td>2,2</td><td>2,3</td>
</tr>
</table>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 31
Tablas(Ejemplos).<html>
<head><title>Tabla 3 filas y 3 columnas – tabla3x3.htm</title></head>
<body>
<table border=1>
<tr><td colspan=2>1,1 y 1,2</td><td>1,3</td>
</tr>
<tr><td rowspan=2>2,1 y 3,1</td><td>2,2</td><td>2,3</td>
</tr>
<tr><td>3,2</td><td>3,3</td>
</tr>
</table>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 32
Tablas(Ejemplos).<html>
<head><title>Tabla con celdas combinadas – tablacombinada.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. sexton</td>
<td>10</td>
<td>espresso</td>
<td>no</td>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 33
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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 34
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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 35
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
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 36
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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 37
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.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 38
Hiperenlaces. 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, http://www.mydomain.com/directorio1/pagina1.htm).
Una dirección relativa define la ubicación de un archivo, basándose en la ubicación del documento actual. Los siguientes son ejemplos de direcciones relativas:
xyzArchivo.htm
../carpetaabc/xyzArchivo.htm
../../carpetaabc/xyzArchivo.htm Los hiperenlaces se pueden utilizar para efectuar referencias
locales a puntos de la misma página. Un hiperenlace a un punto del mismo documento consta de dos partes: una referencia y un destino.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 39
Hiperenlaces. 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(case-sensitive).
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 40
Hiperenlaces(Ejemplos).<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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 41
Hiperenlaces(Ejemplos).<html>
<head><title>Anclas absolutas a otras páginas - anclasabsolutas.htm </title></head>
<body>
<p><h2 align=center>INDICE</h2>
<ul>
<li><a href=“http://www.democompany.com/products/buddy.htm>Link1</a>
<li><a href=“http://www.webdesignref.com”>Link 2</a>
</ul>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 42
Hiperenlaces(Ejemplos).<html>
<head><title>Anclas relativas a otras páginas – anclasrelativas.htm</title></head>
<body>
<p><h2 align=center>INDICE</h2>
<ul>
<li><a href=“capitulo1.htm”>Capitulo 1</a>
<li><a href=“capitulo2.htm”>Capitulo 2</a>
</ul>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 43
Hiperenlaces(Ejemplos).<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.htm”>Volver a la página principal</a>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 44
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, jpg, png). 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, aunque opcionales, conviene indicar siempre: la altura(HEIGHT) y la anchura(WIDTH) del gráfico en pixels.
<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 45
Imágenes y objetos. 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. Todo lo que se requiere hacer es que la etiqueta <IMG> aparezca entre las etiquetas <A> </A> como se muestra:
<A HREF="http://www.netscape.com">
<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31></A>
Por defecto los browsers le colocaran un borde al gráfico para indicar que es un hiperenlace. Por medio del atributo BORDER podremos alterar el grosor de ese borde o eliminarlo colocandolo a cero:
<IMG SRC=“dog.gif” BORDER=12>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 46
Imágenes y objetos. 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).
<IMG SRC=“dog1.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, recuperar un documento, correr un programa, etc). Cuando la región es activada por el usuario la acción es ejecutada.
Tradicionalmente han existido dos tipos de mapas de imágenes: los gestionados por el cliente(browser) y los gestionados por el servidor.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 47
Imágenes y objetos. Para utilizar los mapas de imágenes gestionados por el cliente
se requieren dos cosas: declarar el mapa y asignarlo a una imagen.
Para declarar el mapa:<MAP NAME=“nombremapa”>
<AREA SHAPE=DEFAULT|RECT|CIRCLE|POLY COORDS=“n,n,...”
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, top-y, right-x, bottom-y), CIRCLE(center-x, center-y, radius) y POLY(x1, y1, x2, y2, ..., xN, yn).
Para asignar un mapa a una imagen:
<IMG SRC=... USEMAP="#nombremapa">
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 48
Imágenes y objetos(Ejemplos).<html>
<head><title>mapas sensibles – mapas.htm</title>
<body>
<map name="navegadores">
<area shape=rect coords="0,0,24,31"
href="http://www.netscape.com" alt="netscape">
<area shape=rect coords="26,0,53,31"
href="http://www.microsoft.com" alt="microsoft">
<area shape=default nohref alt="nada">
</map>
<img src="nav.gif" width=53 height=31 border=0 usemap="#navegadores">
</body></html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 49
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.com"><img 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.gif" alt="netscape 4.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>Este es el texto con ALIGN=MIDDLE
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 50
Imágenes y objetos (Ejemplos).<p>
<img align=bottom src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=BOTTOM
<p>
<img align=right src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=RIGHT
<p>
<img align=left src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=LEFT
<p>
<img align=middle src="dwnldns.gif" alt="netscape 4.0" width=88 height=31 hspace=50 vspace=50>Este es el texto con HSPACE=50 VSPACE=50
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 51
Marcos. Los marcos(frames) permiten dividir la ventana del navegador
en varias partes, de forma que en cada una de ellas puede mostrarse una página HTML distinta. Esto permite presentar documentos en múltipes vistas, las cuales pueden ser ventanas independientes o subventanas.
En una página que contiene marcos se sustituye la etiqueta <BODY> por la etiqueta <FRAMESET>. Esta página se denomina documento de definición de marcos.
En cada <FRAMESET> se divide la ventana actual(sea la general o un marco) en varias ventanas definidas por los atributos COLS ó ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 52
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. Un ejemplo del uso de estos atributos es el siguiente:
<FRAMESET ROWS=“30%,70%”, COLS=“50%,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%), absolutos(píxeles) o con * . Este último caso indica que la fila o la columna en cuestión ocupará el resto de la ventana del navegador. Si hay más deun * seguido en ROWS o COLS, el tamaño restante de la ventana se divide en partes iguales. El ejemplo anterior es equivale a:
<FRAMESET ROWS=“30%,70%”, COLS=“*,*”> ó
<FRAMESET ROWS=“30%,*”, COLS=“*,50%”>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 53
Marcos. Los marcos son creados de izquierda a derecha para las
columnas y de arriba hacia abajo para las filas. Cuando ambos atributos son especificados, las vistas son creadas de izquierda a derecha para la primera fila, de izquierda a derecha para la segunda fila, etc.
La etiqueta <FRAME> permite indicar que página HTML debe cargarse en cada uno de los marcos. 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; SRC indica la dirección del documento HTML que ocupará el marco; SCROLLING permite indicar si se colocan o no las barras de desplazamiento al marco.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 54
Marcos. NORESIZE indica que no se puede cambiar el tamaño del
marco; FRAMEBORDER indicara si el marco lleva o no un borde; MARGINWIDTH permite cambiar los márgenes horizontales de un marco(se especifica en píxeles) y MARGINHEIGHT permite cambiar los márgenes verticales.
Los marcos se pueden anidar, es decir, dentro de un <FRAMESET> puede aparecer otro <FRAMESET>.
<FRAMESET cols=“33%,33%,34%”>
...contenido del primer marco
<FRAMESET rows=“40%, 50%”>
...contenido del segundo marco, primera fila
...contenido del segundo marco, segunda fila
</FRAMESET>
...contenido del tercer marco
</FRAMESET>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 55
Marcos. Por defecto, si pulsamos sobre un enlace definido en un marco,
la nueva página se abrirá en ese mismo marco. Para indicar en que marco se abrirá un hiperenlace se utiliza el atributo TARGET de las etiquetas <A>, <AREA> y <FORM>. Una aplicación de esto es:
<A HREF=“pagina.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), _blank(muestra la nueva página en una ventana nueva del navegador), _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
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 56
Marcos. Para especificar el contenido para aquellos browsers que no
soportan marcos se utilizan las etiquetas <NOFRAMES> </NOFRAMES>. Este etiqueta puede ser usada al final de la seccion <FRAMESET> del documento.
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. A esto se le conoce como marcos interactivos y la etiqueta que se utiliza para declararlos es <IFRAME> </IFRAME>.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 57
Marcos(Ejemplos).<html><head><title>Ventana con dos marcos – 2marcos.htm</title></head><frameset rows="50%,50%">
<frame src="anclaslocales.htm"><frame src="capitulo1.htm">
</frameset></html>
<html><head><title>Ventana con 6 marcos</title></head><frameset rows="30%,70%", cols="33%,34%,33%">
<frame src="mapas.htm"><frame src="listadefiniciones.htm"><frame src="listaordenada.htm"><frame src="listanoordenada.htm"><frame src="tabla2x3.htm"><frame src="tablasimple.htm">
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 58
Marcos(Ejemplos).</frameset>
</html>
<html>
<head><title>Ventana con tres marcos – 3marcos.htm</title></head>
<frameset cols="20%,80%">
<frameset rows="302,259">
<frame src="anclaslocales.htm">
<frame src="capitulo1.htm">
</frameset>
<frame src="clientes.jpg">
</frameset>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 59
Marcos(Ejemplos).<html>
<head><title>Ventana con cuatro marcos – 4marcos.htm</title></head>
<frameset rows="30%,*", cols="*,*">
<frame src="anclaslocales.htm">
<frame src="capitulo1.htm">
<frame src="capitulo2.htm">
<frame src="listaanidada.htm">
<noframe>
Esta página contiene marcos. Si está leyendo esta
frase es porque su navegador no los admite.
</noframe>
</frameset>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 60
Marcos(Ejemplos).<html><head><title>Ejemplo de marco interactivo – marcointeractivo.htm</title></head><body>En esta pantalla aparecerá un marco interactivo con la informacióncontenida en losmasvendidos.htm. En caso de no verlo, podrá acceder a la información de esta página a través del enlace.<p><iframe src="losmasvendidos.htm" width=60% height=200 scrolling="auto" align="right" frameborder=1>Para ver los más vendidos, pulse aquí <a href="losmasvendidos.htm">Los mas
vendidos</a></iframe><hr> Este texto se ha insertado después de la declaración del marco interactivo.</body></html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 61
Marcos(Ejemplos).<html>
<head><title>Los mas vendidos – losmasvendidos.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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 62
Marcos(Ejemplos).<html>
<head><title>Marcos anidados – marcosanidados.htm</title></head>
<frameset cols="30%,*">
<frame src="anclaslocales.htm" frameborder=0 >
<frameset rows="40%,*">
<frame src="itclogobig.jpg">
<frame src="listaanidada.htm">
</frameset>
</frameset>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 63
Marcos(Ejemplos).<html><head><title>Uso del target – targetindex.htm</title></head><frameset cols="30%,70%">
<frame src="targetindex.htm" name="marco1"><frame src="paginavacia.htm" name="marco2">
</frameset></html>
<html><body><h1 align=center>Opciones de Target – targetmarco.htm</h1><p><ol> <li><a href="tablasimple.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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 64
Marcos(Ejemplos). <li><a href="tablasimple.htm" target="_top">Página en ventana completa</a> <li><a href="tablasimple.htm" target="_self">Página en este mismo marco</a> </ol></body></html>
<html><head><title>Uso de los atributos de los marcos – attmarco.htm</title></head><frameset cols="33%,33%,33%"> <frameset rows="*,200">
<frame src="tabla2x3.htm" scrolling="no"><frame src="itclogosmall.jpg" marginwidth=20 marginheight=20 noresize>
</frameset> <frame src="capitulo1.htm" frameborder=0> <frame src="listaordenada.htm" frameborder=0></frameset></html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 65
Otros tags(<Font>). La etiqueta <FONT> </FONT> es obsoleta en HTML 4.01; en
vez de ella se utilizan las etiquetas CSS. La etiqueta <FONT> dispone de cuatro atributos básicos: FACE, SIZE, COLOR y STYLE.
El atributo FACE permite indicar el nombre de la fuente o de la familia de fuentes; 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.
Los siguientes son ejemplos válidos del uso de <FONT>:<FONT FACE=“Arial”>Esto es importante</FONT>
<FONT FACE=“Arial, Helvetica, Sans serif”>Este texto se mostrará en una fuente distinta</FONT>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 66
Otros tags(<Font>). El atributo FACE permite especificar como tamaño de la fuente
un número entre 1 a 7; si a este número se le antepone los signos + ó - , 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, podrá utilizar
valores que pertenezcan a los rangos +1 a +6 y –1 a -6. Por ejemplo, no es posible especificar <FONT SIZE=“+10”> porque sólo existen siete tamaños.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 67
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
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 68
Otros tags(<Font>). Algunos de los nombres de fuentes para plataformas y
exploradores de Microsoft: Arial, Comic Sans, Courier New, Georgia, Impact, Lucida Sans Unicode, Symbol, Tahoma, Times New Roman, Verdana y Wingdings.
Algunos de valores y nombres válidos para el COLOR son los siguientes: black(#000000), silver(#C0C0C0), gray(#808080), white(#FFFFFF), maroon(#800000), red(#FF0000), purple(#800080), fucsia(#FF00FF), green(#008000), lime(#00FF00), olive(#808000), yellow(#FFFF00), navy(#000080), blue(#0000FF), teal(#008080), aqua(#00FFFF).
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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 69
Otros tags(<Font>). En ciertos casos, puede ser adecuado modificar el tamaño, el
color o el tipo de la fuente en todo el documento. Para ello, se debe utilizar el elemento <BASEFONT> en la zona <HEAD> del documento. <BASEFONT> permite el empleo de los atributos COLOR, FACE y SIZE, y se debe emplear una única vez en todo el documento. El siguiente es un ejemplo válido del uso de este atributo:
<head><basefont color=“red” face=“Arial, Helvetica” size=6></head>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 70
Otros tags(<Body>). 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; BACKGROUND para indicar una imagen de fondo para una página Web; TEXT para definir el color predeteminado para el texto contenido en la página; LINK para definir el color predeterminado de los hiperenlaces no visitados; 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. 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.gif”>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 71
Otros tags(<Table>). A las tablas puede asignárseles colores de fondo de varias
formas. El atributo BGCOLOR es válido para <TABLE>, <TR>, <TH> y <TD>.
<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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 72
Otros tags(Ejemplos).<html>
<head><title>Empleo de Fuentes – fuentes.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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 73
Otros tags(Ejemplos).<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, Palatino, charter, Helvética, 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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 74
Otros tags(Ejemplos).<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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 75
Otros tags(Ejemplos).<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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 76
Otros tags(Ejemplos).<html>
<head>
<title>Empleo de Fuentes – fuentes2.htm</title>
<basefont face="Arial, Helvetica" color="blue" size=5>
</head>
<body>
<p align="center">Este texto sale del mismo color en todo el documento.
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 77
Otros tags(Ejemplos).<html>
<head>
<title>Empleo de Colores – fondocolor.htm </title>
</head>
<body bgcolor="lightblue" text="black" link="navy" alink="yellow" vlink="red">
<h1 align="center">HIPERENLACES</h1>
<p>
<a href="losmasvendidos.htm">Lista de autores más solicitados</a><br>
<a href="listadefiniciones.htm">Lista definiciones</a><br>
<a href="textoconformato.htm">Texto con formato</a>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 78
Otros tags(Ejemplos).<html>
<head>
<title>Empleo de Imagen de fondo – fondoimg.htm </title>
</head>
<body background="itclogobig.jpg">
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 79
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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 80
Otros tags(Ejemplos).</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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 81
Otros tags(Caracteres especiales y reservados). Se deben utilizar entidades nombradas o numeradas cuando se
necesite un carácter especial o reservado en el texto del documento.
Las entidades numeradas se especifican encerrando un código entre los signos &# y ; .(Por ejemplo, ½).
Las entidades nombradas son sinónimos para poder recordar con mayor facilidad estos caracteres. Así, por ejemplo, ½ también se puede escribir como ½.
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 82
Otros tags(Caracteres especiales y reservados).
CODIGO RESULTADO
á, Á, é, É,...
á, Á, é, É, í, Í, ó, Ó, ú, Ú
¿ ¿
¡ ¡
º º
ª ª
© ©
® ®
(espacio en blanco que no puede ser usado para saltar de línea)
™ ™
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 83
Otros tags(Caracteres especiales y reservados).
CODIGO RESULTADO
< <
> >
& &
" “
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 84
Otros tags(Ejemplos).<html>
<head><title>Caracteres especiales y reservados caracteresespeciales.htm</title></head>
<body>
<center><table BORDER COLS=2 WIDTH="100%" >
<caption><b><font face="Arial,Helvetica"><font size=+2>CARACTERES ESPECIALES
Y RESERVADOS</font></font></b></caption>
<tr>
<td>
<center><b><font face="Arial,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>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 85
Otros tags(Ejemplos).<tr>
<td>&aacute;, &Aacute;, &eacute;, &Eacute;,...</td>
<td>á, Á, é, É, í, Í, ó,
Ó, ú, Ú</td>
</tr>
<tr>
<td>&iquest;</td>
<td>¿</td>
</tr>
<tr>
<td>&iexcl;</td>
<td>¡</td>
</tr>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 86
Otros tags(Ejemplos).<tr>
<td>&ordm;</td>
<td>º</td>
</tr>
<tr>
<td>&ordf;</td>
<td>ª</td>
</tr>
<tr>
<td>&copy;</td>
<td>©</td>
</tr>
<tr>
<td>&reg;</td>
<td>®</td></tr>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 87
Otros tags(Ejemplos).<tr>
<td>&nbsp;</td>
<td>(espacio en blanco que no puede ser usado para saltar de línea)</td>
</tr>
<tr>
<td>&trade;</td>
<td>™ </td>
</tr>
<tr>
<td>&lt;</td>
<td><</td>
</tr>
<tr>
<td>&gt;</td>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 88
Otros tags(Ejemplos).<td>></td>
</tr>
<tr>
<td>&amp;</td>
<td>&</td>
</tr>
<tr>
<td>&quot;</td>
<td>“ </td>
</tr>
<tr>
<td>&#164;</td>
<td>¤</td>
</tr>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 89
Otros tags(Ejemplos).<tr>
<td>&#239;</td>
<td>ï</td>
</tr>
<tr>
<td>&#234;</td>
<td>ê</td>
</tr>
<tr>
<td>&#235;</td>
<td>ë</td>
</tr>
</table></center>
</body>
</html>
Introducción a HTML
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco – Cartagena de Indias 90
Resumen. El lenguaje HTML se utiliza para escribir las páginas Web. Está
basado en el concepto de hipertexto(texto presentando de forma estructurada y agradable, con enlaces que conducen a otros documentos o recursos Web(imágenes, audio, video...otros).
Los documentos HTML se escriben en texto plano(ASCII) y consisten en un conjunto de etiquetas(tags) encerradas entre los símbolos < y >.(ejemplo, <HTML></HTML>).
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, imágenes y mapas sensibles, los hiperenlaces, listas, tablas, marcos entre otros, para los cuales existen las etiquetas respectivas.
Introducción a HTML