INSTITUTO TECNOLOGICO AYACUCHO

SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

---------------------------------------------------------------------------------------------------------------

Manual Básico de
HTML
Creación y Estructura de Páginas WEB
Lic. Jonatan Hinojosa Delgadillo
Docente de Informática
©Todos los Derechos Reservados
La Paz – Bolivia

-------------------------------------------------------------------------------------------------------------------

LIC. JONATAN HINOJOSA DELGADILLO 1

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Manual Básico de HTML

Creación y Estructura de Páginas WEB
INDICE
INTRODUCCIÓN................................................................................................................. 3
¿EN QUE CONSISTE EL MANUAL?...................................................................................... 3
REQUERIMIENTOS Y MATERIAL……………………………………………………………………………………. 3
¿QUÉ ES HTML?................................................................................................................. 4
PÁGINAS WEB ................................................................................................................... 4
ETIQUETAS ........................................................................................................................ 4
ESTRUCTURA BÁSICA DE UNA PÁGINA WEB..................................................................... 4
¿CÓMO SE UTILIZAN LOS COLORES EN HTML?................................................................. 6
TEXTO EN HTML................................................................................................................ 7

ENCABEZADOS ................................................................................................................. 9
UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO.............................................................. 9
IMÁGENES EN HTML ....................................................................................................... 11
TABLAS............................................................................................................................. 13
NUMERACIÓN Y VIÑETAS................................................................................................. 15
HIPERVÍNCULOS .............................................................................................................. 17
FRAMES............................................................................................................................ 18
OTRAS ETIQUETAS ÚTILES................................................................................................ 20

LIC. JONATAN HINOJOSA DELGADILLO 2

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Introducción.
Internet, como está ahora, es una excelente herramienta para búsqueda de información,
independientemente de en qué punto del mundo se encuentre. Las aplicaciones de
negocios, de hecho, se afanan por dar a los usuarios herramientas para crear nueva
información a partir de cero. Internet está al borde de una pequeña revolución que,
aunque usted como usuario no se dé cuenta de ello, transformará no la forma en que está
diseñada o construida, sino la manera en que usted la utilizará. De todos los servicios que
nos presta Internet, el segundo más utilizado es el World Wide Web o WWW. Una vez que
uno se encuentra en condiciones de utilizar los programas clientes de Internet y en
especial los Navegadores o Browsers (Mozilla Firefox, Opera, Microsoft Internet Explorer o
Google Chrome) tal vez se pregunte ¿Cómo se crean estas páginas Internet? La respuesta
es …. con HTML.

¿En qué consiste el manual?

Se trata de un manual y guía de instrucciones a la vez, que explica los usos, aplicaciones y
resultados de varias etiquetas (instrucciones) de HTML. Luego de avanzar un grupo de
etiquetas relacionadas se procede a aplicar lo aprendido en un ejemplo para mostrar de
forma práctica el uso de dichas etiquetas. Se comienza con una página sin mucho brillo, y
poco a poco se aplican colores, tamaños, formato y atributos al texto y a la página en sí. Se
termina con una página con frames y que cuenta con viñetas, listas ordenadas y tablas. El
objetivo es que el usuario pueda ya construir sus webs sites comprendiendo y
experimentando con este manual siguiendo todas sus indicaciones.

Requerimientos y material.
El mundo de la Internet es un medio que no precisa de mucho conocimiento, el
prerrequisito inmediato para poder usar este manual es tener conocimientos básicos de
manejo de Windows, un editor de texto y haber utilizado alguna vez un navegador de
Internet. Para la aplicación de los ejemplos de este manual usted necesitara:
• Un navegador de Internet (Google Chrome por ejemplo)
• Un editor de texto, preferentemente el Block de notas (Notepad) o Adobe
Dreamweaver
• Un medio físico para grabar los ejemplos, ya sea un dispositivo USB (flash
memory) o una carpeta en su disco duro.
• Un archivo para fondo, llamado fondo.gif.
• Un archivo gráfico, llamado foto.jpg.

LIC. JONATAN HINOJOSA DELGADILLO 3

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

¿Qué es HTML?
HTML son las iniciales de Hiper Text Markup Language. Es un conjunto o serie de etiquetas
incluidas en archivos de texto que definen la estructura de un documento WWW y sus
vínculos con otros documentos. Los navegadores WWW leen estos archivos de texto e
interpretan esas etiquetas para determinar cómo desplegar la página Web.

Páginas WEB.
El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser
interpretadas por un navegador de Internet. Estas instrucciones son denominadas
Etiquetas.

Etiquetas.
Una etiqueta cumple su función de la siguiente manera:

<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”

texto/gráfico/etiquetas A la cual se aplica la etiqueta
</nombre de la etiqueta> Cierra de la etiqueta siempre entre “</>”

Al acabar de crear un hipertexto , este se deberá grabar con la extensión .html. Es bueno
acotar que un archivo HTML es un archivo texto que tiene una extensión definida. Este
archivo de texto contiene etiquetas, las mismas que son expresadas como instrucciones y
el navegador WEB es quien las interpreta.

Estructura básica de una página WEB.

Una página web está compuesta de 2 partes: el encabezamiento y el cuerpo de la página.
Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar
incluidas en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales
son:
<html></html> Indica al navegador que el documento texto que está leyendo es un
documento HTML. Esta etiqueta se abre al inicio del archivo y se
cierra al final del mismo.

<head></head> Acá se detalla el encabezado de la página WEB. Esta etiqueta

se abre luego de <html>.

<body></body> Cuerpo de la página donde se despliega el contenido global. Esta

etiqueta se abre luego de cerrar el encabezamiento con y se
extiende hasta el final de la página, cerrándose antes de </html>.

LIC. JONATAN HINOJOSA DELGADILLO 4

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Ejemplo 1:
<html>
<head> </head>
<body>
Bienvenidos al Curso de HTML
</body>
</html>

El hipertexto será grabado con el nombre index.html en su unidad USB (flash) o en alguna
ubicación en el disco duro. Al asignar la extensión o .html ya se crea un hipertexto.
Asegúrese de ingresar “index.html” como nombre a grabar en su bloque de notas
(incluidas las comillas) para evitar que se añada la extensión .txt. Sin cerrar el programa de
edición de texto que estamos usando, abra el navegador de su preferencia. En la pantalla
de dirección WEB, introduzca la ruta completa a su archivo index.html, y usted deberá
poder ver en su pantalla su primera página WEB.

Importante:
Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse
el error podría causar confusión al navegador.

Etiqueta <title> </title>

Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y
define en su contenido el título de la página web, mismo que aparecerá en la parte
superior izquierda de la pantalla de su navegador. Sin cerrar nuestro navegador de
Internet, volvemos al editor de texto e incluimos el campo

Ejemplo 2:
<html>
<head> <title>Curso de HTML</title> </head>
<body>
Bienvenidos al Curso de HTML
</body>
</html>

El nuevo archivo HTML se grabará con el mismo nombre index.html, tan solo usando la
opción de Grabar en su editor de Texto. Una vez realizado esto, y sin cerrar su editor de
texto, vamos al navegador en el que seleccionamos la opción de Actualizar/Refresh y
nuestra nueva página estará visible. Notará que el título aparecerá en la parte superior de
la página.

LIC. JONATAN HINOJOSA DELGADILLO 5

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Etiqueta <body> </body>

Todo el texto, las imágenes el formato visible al usuario y en sí, el contenido de nuestra
página web deben encontrarse entre las etiquetas <body>…</body> >. Esta etiqueta
cuenta con los siguientes atributos:
• Bgcolor define el color de fondo de la página
• Text define el color del texto de la página
• Link define el color de los vínculos en la página
• Alink define el color del vínculo actual o activado en la página
• Vlink define el color del vínculo ya visitado
• Background define el archivo gráfico que será desplegado como fondo

Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.

¿Cómo se utilizan los colores en HTML?

Se pueden llegar a tener 16 millones de colores en una página web.
Existen dos formas para aplicar colores a una página web:
1. Se especifica el color deseado directamente con el nombre del color en inglés:
Ejemplo: blue, green, yellow
2. Se especifica el color deseado mediante números hexadecimales mediante la
siguiente estructura:
#RRVVAA
El color tiene un signo de numeral # antecediendo a los 6 números.
Existen dos números para cada color principal: rojo, verde y azul.
Cada uno de los números varía hexadecimal mente {0,1,2…,9,A,B.…F}.

Ejemplos de Colores:
Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos
para este efecto los atributos bgcolor y text:

LIC. JONATAN HINOJOSA DELGADILLO 6

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Ejemplo 3:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al Curso de HTML
</body>
</html>

Grabe este archivo seleccionando la opción de Guardar Como de su editor de texto, de

modo que se mantenga el nombre index.html. Cuando usted vaya a su navegador
preferido y seleccione la opción de Actualizar, notara el cambio.

Texto en HTML.
Una vez que ya se tiene una idea de cómo funcionan la etiqueta de encabezamiento y
parte de la etiqueta de definición del cuerpo de la página, trabajemos con el texto. HTML
fue creado en principio para el alfabeto en inglés, sin embargo, se buscaron modos para
mostrar también caracteres o símbolos denominados especiales. Para utilizar caracteres
especiales usaremos los símbolos & y ; para denotar el inicio y final respectivamente de un
símbolo especial.

De la siguiente manera:

La idea básica para acentos y signos latinos es combinar dos teclas. Para lograr una o con
acento debemos combinar una o y un acento:

&oacute; ó

LIC. JONATAN HINOJOSA DELGADILLO 7

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Ejemplo 4:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al Curso de HTML
Cuando la temperatura es menor a 15&deg; c hace bastante fr&iacute;o.
Este es un ejemplo de p&aacute;gina Web
</body>
</html>

Luego de realizar el proceso para grabar y actualizar la página notara que se incluyen en la
página los símbolos de grados, la i con acento y la a con acento. Notará también que el
texto se encuentra de corrido en una sola fila, para bajar de línea utilizaremos la siguiente
etiqueta especial...

Etiqueta <br>
La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un
documento HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una
máquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre.

Etiqueta <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada
automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial,
porque no necesita de cierre, tiene los siguientes atributos:
• Align establece que la regla se alinee a la izquierda, centro o derecha
LEFT,CENTER o RIGHT
• NOSHADE quita el sombreado predeterminado de la regla
• WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)
• SIZE permite especificar el alto de la regla (en pixeles)

Ejemplo 5:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al Curso de HTML <br>
<hr align=center width=50%> <br>
Cuando la temperatura es menor a 15&deg; c hace bastante fr&iacute;o. <br>
<hr align=left width=25% size=5> <br>
Este es un ejemplo de p&aacute;gina Web <br>
</body>
</html>

LIC. JONATAN HINOJOSA DELGADILLO 8

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Encabezados.
Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1...6”) son encabezados
del cuerpo del texto. El encabezamiento nos proporciona las letras de mayor tamaño.
Notará que, si usamos una etiqueta de encabezamiento, automáticamente se incluirá un
retorno de carro al final del mismo. La etiqueta tiene el siguiente atributo:
• Align Permite ubicar el encabezamiento a la izquierda, centro o
derecha de la pantalla (LEFT, CENTER,RIGHT)

Ejemplo 6:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
<h1 align="center"> Bienvenidos al Curso de HTML </h1><br>
<hr align=center width=50%> <br>
<h2> Bienvenidos </h2>
Cuando la temperatura es menor a 15&deg; c hace bastante fr&iacute;o. <br>
<hr align=left width=25% size=5> <br>
Este es un ejemplo de p&aacute;gina Web <br>
</body>
</html>

Luego de realizar el proceso de guardado/actualización notará las diferentes dimensiones

de las dos primeras líneas.

Ubicación, formato y atributos de texto.

Etiqueta <center> </center>
Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el
cierre.

Etiqueta <b> </b>

Esta es la etiqueta que nos posibilita un texto con negrillas.

Etiqueta <u> </u>

Etiqueta que posibilita resaltar un texto con subrayado.

Etiqueta <i> </i>

Etiqueta que permite resaltar el texto con inclinación itálica.

LIC. JONATAN HINOJOSA DELGADILLO 9

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Recuerde que puede combinar entre si todas estas etiquetas. A continuación, vamos a ver
un ejemplo para demostrar el uso de las últimas 4 etiquetas que se vieron.

Ejemplo 7:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
<h1 align="center"> Bienvenidos al Curso de HTML </h1><br>
<hr align=center width=50%> <br>
<h2> Bienvenidos </h2>
Cuando la temperatura es menor a 15&deg; c hace bastante fr&iacute;o. <br>
<hr align=left width=25% size=5> <br>
Este es un ejemplo de p&aacute;gina Web <b> <i> </i> </b> <br>
<b> Este texto esta con negrillas </b> <br>
<u> Este texto esta con subrayado </u> <br>
<i> Este texto esta con inclinaci&oacute;n it&aacute;lica </i> <br>
Este <b> texto <i> cuenta <u> con un </u> combinado </i> de </b> todo. <br>
</body>
</html>

Note el cambio en la sentencia de la línea o regla <hr>, se eliminó “align=left”. Notará que
la nueva regla saldrá al centro, pues esta es la alineación por defecto. Además, sacamos el
punto final que existía en la primera línea que ahora aparece centrada.

Etiqueta <font> </font>

Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo
de fuente, tamaño y color. Atributos:
• Color determina el color que se aplica al texto.
• Size determina el tamaño relativo del texto. Los tamaños válidos son
del 1 al 7, siendo el predeterminado el 3 y el más grande el 1.
• Face asigna una fuente o tipo de letra.

Ejemplificando, introduciremos lo siguiente: Bolivia. Note que la primera B es más

grande que el demás texto. Usaremos el tamaño 7 para la letra B y el tamaño estándar (3)
para las demás letras.

LIC. JONATAN HINOJOSA DELGADILLO 10

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Ejemplo 8:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
<h1 align="center"> Bienvenidos al Curso de HTML </h1><br>
<hr align=center width=50%> <br>
<h2> Bienvenidos </h2>
Cuando la temperatura es menor a 15&deg; c hace bastante fr&iacute;o. <br>
<hr align=left width=25% size=5> <br>
Este es un ejemplo de p&aacute;gina Web <b> <i> </i> </b> <br>
<b> Este texto esta con negrillas </b> <br>
<u> Este texto esta con subrayado </u> <br>
<i> Este texto esta con inclinaci&oacute;n it&aacute;lica </i> <br>
Este <b> texto <i> cuenta <u> con un </u> combinado </i> de </b> todo. <br>
<font color="red"><font size=7>B</font>o</font><font color="yellow">
li</font><font color="green">via</font><br>
</body>
</html>

Imágenes en HTML.
Hasta este momento se ha trabajado solamente con texto. Comencemos a introducir
gráficos en nuestra página HTML.
Se deben tener dos consideraciones importantes para trabajar con gráficos: Los únicos
formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg.
Las imágenes no deben ser de tamaño grande porque el visualizador o navegador puede
demorar demasiado en bajarlas.
Acá trabajaremos también con el atributo Background de la etiqueta que había quedado
pendiente.
La idea de trabajar con un fondo en una página web, es la misma que tener un fondo en
nuestro entorno Windows. El archivo puede estar ubicado en la misma carpeta o bien en
otra que contenga solo gráficos. Trate de que el color de fondo de la página (que ya no
aparecerá) sea parecido al color principal de la imagen que usará como fondo. Si es
necesario re acomode los colores de texto y vínculos definidos en <body>.
Supondremos tenemos un gráfico llamado “fondo.gif” para el ejemplo 8 que como notará
será re formulado en función a utilizar las nuevas etiquetas.

Importante:
En Internet por lo general una mayúscula no es igual a una minúscula. Tome en cuenta
esto al utilizar y hacer referencia a archivos. Como sugerencia es bueno tener todos los
archivos con minúsculas.

LIC. JONATAN HINOJOSA DELGADILLO 11

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Etiqueta <img>
Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta
instruye al navegador para que exhiba la imagen especificada. El formato básico para
incluir un gráfico es: <img src=”imagen.jpg”>.
No es necesario re dimensionar en forma permanente un archivo gráfico para exhibirlo en
contextos variables; sin embargo, el autor de HTML puede indicar al navegador que re
dimensione la imagen especificando los siguientes atributos:
• Src identifica la imagen que se desplegará.
• Height para redimensionamiento de gráfico (en pixeles o en porcentaje)
• Width para redimensionamiento de gráfico (en pixeles o en porcentaje)
A la imagen se le puede aplicar un borde que se hace notorio especialmente cuando se
trata de una imagen que además es un hipervínculo:
• Border Definido en pixels
La imagen también puede alinearse con respecto al texto:
• ALIGN Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT
En caso de que la imagen no pueda exhibirse, se puede desplegar un texto:
• ALT Especifica el texto alterno
Es a partir de este ejemplo, que se va a realizar una nueva página, la misma que
llamaremos pag2.html o bien pude ser grabada con otro nombre.
Supondremos contamos con un gráfico llamado foto.jpg.

Ejemplo 9:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Informaci&oacute;n General</h2>
Este curso muestra los conceptos b&aacute;sicos del uso de etiquetas e instrucciones
en la elaboraci&oacute;n de documentos <b><i>
<font color="#000080">HTML</font></i></b>.<br><br>
<center> <img src="foto.jpg" border="1" alt="Foto de Claudia"> </center> <br>
Es muy importante saber ubicar los gr&aacute;ficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una p&aacute;gina WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
</body>
</html>

LIC. JONATAN HINOJOSA DELGADILLO 12

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Realice el proceso de grabado con el nuevo nombre de página “pag2.html” y cargue la

nueva página en su navegador.

Tablas.
También podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:

Etiqueta <table> </table>

Señala el inicio y final de una tabla. Sus atributos son:

• Align Establece la alineación de la tabla o texto mediante

ALIGN=LEFT o ALIGN=RIGHT
• Bgcolor Establece el color de fondo de las celdas de la tabla
• Border Determina el ancho del borde en pixeles
• BorderColor Asigna un color al borde
• BorderDark Determina el color de la parte oscura de un borde
de 3 dimensiones
• BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones
• Caption Especifica el titulo para la tabla
• Cellpadding Establece la cantidad de espacio libre junto al contenido
de una celda
• Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla
• Width Determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta <th> </th>

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de
una tabla. Atributos principales:

• Colspan especifica el número de celdas que cubre el encabezado

• Align determina la posición del texto del titilo

Etiqueta <tr> </tr>

Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse
como la etiqueta que define filas.

• Align Alineación del texto/objetos en toda la fila

LIC. JONATAN HINOJOSA DELGADILLO 13

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Etiqueta <td> </td>

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de
una tabla. Atributos principales:

• Align Alineación del texto/objeto de la celda

• Bgcolor Color de fondo de la celda
• Background Imagen de fondo de una celda
• Width Ancho de la celda/columna con respecto al ancho de la tabla
Solo precisa definir el ancho en la primera celda
de la columna.
Recuerde que, dentro de una celda, usted puede insertar desde texto o un gráfico hasta
una tabla entera.

Ejemplo 10:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Informaci&oacute;n General</h2>
Este curso muestra los conceptos b&aacute;sicos del uso de etiquetas e instrucciones
en la elaboraci&oacute;n de documentos <b><i>
<font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center> <br>
Es muy importante saber ubicar los gr&aacute;ficos y combinar de buena manera
los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una p&aacute;gina WEB es muy importante, pues provee a nuestro trabajo una ventana al
mundo.<br>
<br><center>

<table width=80% align=center border=3>

<tr><th colspan=3>Directorio Telef&oacute;nico</th></tr>
<tr align=center>
<td width=40% bgcolor="#C0C0C0">
Nombre
</td>
<td width=30% bgcolor="#C0C0C0">
Teléfono
</td>
<td width=30% bgcolor="#C0C0C0">

LIC. JONATAN HINOJOSA DELGADILLO 14

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

E-Mail
</td>
</tr>
<tr>
<td>
Jos&eacute; Rodr&iacute;guez
</td>
<td>
223454
</td>
<td>[email protected]</td>
</tr>
<tr>
<td>
Carolina Nu&ntilde;ez
</td>
<td>
453444
</td>
<td>[email protected]</td>
</tr>
</table> <br> </center>
</body>
</html>
Grabe este archivo con el nombre pag2.html sobrescribiendo el archivo anterior.

Consejo:
Puede usar tablas sin borde (usando BORDER=0 en la sentencia <table>) para ubicar
gráficos y texto de forma elegante.

Numeración y viñetas
En HTML todo es posible, y tal cual en un editor de texto podemos trabajar con
numeración y viñetas, lo podemos hacer acá.

Etiqueta <ul> </ul>

Indica al navegador que cree una lista con viñetas no ordenada.
No solamente usada para fines de numeraciones y viñetas, sino también para fines de
sangría u tabulaciones.

LIC. JONATAN HINOJOSA DELGADILLO 15

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Etiqueta <ol> </ol>

Listas ordenadas, esta etiqueta predeterminada indica al navegador que numera la lista de
elementos comprendidos dentro de las etiquetas <ol>.

Etiqueta <li> </li>

Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de
línea en una lista. Atributos:
• Type Especifica el tipo para listas ordenadas Type=A Usa letras
mayúsculas, TYPE=a emplea letras minúsculas, Type=I Usa
números romanos grandes, Type=i usa números romanos
pequeños y Type=1 usa números arábigos.
Type también puede servir para definir la forma de la viñeta en
las listas no ordenadas. Type=DISC, CIRCLE y SQUARE son las
opciones disponibles.
• Value Indica que se inicie la numeración a partir del número especificado.
Creamos una nueva página para el siguiente ejemplo:

Ejemplo 11:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>
<li>Camisas para Jos&eacute;</li>
<li>Loci&oacute;n para Daniel</li>
</ul><br>
<h2>Estudiar para ma&ntilde;ana</h2><br>
<ol>
<li type=a>Geometr&iacute;a</li>
<li>ciencias Sociales</li>
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol>
<li type=i>Asistir a la Universidad</li>
<li>Comprar Disco</li>
<li>Llevar el auto al mec&aacute;nico</li>
</ol><br>

LIC. JONATAN HINOJOSA DELGADILLO 16

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

<h1>Objetivos</h1>
<ul>El uso de estas etiquetas tambi&eacute;n puede ayudar a mover el
texto en base a tabulaciones o sangr&iacute;as de texto, para
diferenciar parrafos o textos de los encabezamientos.
</ul>
</body>
</html>
Grabamos el nuevo ejemplo con el nombre “pag3.html”. Hasta este punto tenemos 3
páginas HTML.

Hipervínculos.
Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra
dirección URL, página WEB o recurso.

Etiqueta <a> </a>

La etiqueta <a> que viene de “ancla”, denota el inicio y el final de una instrucción que
contiene alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario
vincularse a otra ubicación dentro del mismo documento HTML, a otro sitio WEB, a un
servidor FTP, enlace de correo electrónico, ... Atributos:
• HREF Recurso al cual se hace referencia el hipervínculo
• NAME Especifica el nombre de la posición a donde apuntar
• TARGET Destino del enlace (generalmente para páginas con Frames)

Por ejemplo, desde una nueva página, que llamaremos pag4.html, crearemos enlaces a las
3 páginas anteriores y además otros enlaces importantes. En este ejemplo, aplicaremos
también los atributos para colores de los vínculos de la etiqueta Body.

Ejemplo 12:
<html>
<head> <title>P&aacute;gina de enlaces</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif" link="#000080"
vlink="magenta" alink="black">
<center><h1> <a name="tope"> </a> Enlaces </h1><br>
<img src="foto.jpg" alt="Foto de Claudia"><br><br>
<a href="index.html">P&aacute;gina Principal o P&aacute;gina Uno</a><br>
<a href="http://www.itabolivia.net/">Instituto Tecnologico Ayacucho</a><br>
<br>
<a href="#tope">De vuelta arriba</a>
</center>
</body>
</html>

LIC. JONATAN HINOJOSA DELGADILLO 17

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Frames.
Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.

Etiqueta <frameset> </frameset>

Define la disposición gráfica de los marcos en la pantalla. Atributos:
• Rows Determina el alto de las filas
• Cols Determina el ancho de las columnas.
• Framespacing Espacio entre frames

Etiqueta <frame> </frame>

Define un solo marco que forma parte del conjunto de marcos definidos en .Sus atributos
son:
• Marginheight Determina que tanto espacio vertical (en pixeles) existe
entre el objeto ubicado en un marco, y los extremos
superior o inferior de este.
• MarginWidth Determina que tanto espacio horizontal (en pixeles)
existe entre el objeto ubicado en un marco, y los
extremos izquierdo o derecho de éste.
• Name Ofrece la capacidad de Dar nombres a las ventanas
FRAME, de modo que puedan ser utilizados como destino
de los hipervínculos.
• Noresize Indica que el usuario no puede redimensionar el marco
• Scrolling Habilita una barra de desplazamiento para un marco.
Existen tres parámetros posibles SCROLLING=YES,
SCROLLING=NO y SCROLLING=AUTO que habilita la barra
solo si es necesario
• SRC indica que exhiba en un marco el contenido de un documento HTML.

Etiqueta <noframes> </noframes>

Etiqueta que es usada para desplegar un texto o una página alternativa cuando un
navegador no es capaz de desplegar los marcos.

Veamos un ejemplo que resume todo esto. Debemos crear un nuevo archivo html, al cual
llamaremos: frames.html.

LIC. JONATAN HINOJOSA DELGADILLO 18

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Ejemplo 13:
<html>
<head> <title>P&aacute;gina de frames</title> </head>
<frameset COLS="20%,*" frameborder=0 framespacing=0 border=0>
<frame name="izquierda" src="pag4.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frameset ROWS="30%,*" frameborder=0 framespacing=0 border=0>
<frame name="superior" src="pag2.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frame name="principal" src="pag3.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
</frameset>
</frameset>
<noframes>
<center>
Su navegador no puede desplegar frames.
</center>
</noframes>
</html>

Una vez que cargue la nueva página frames.html podrá ver los marcos que se crearon.
Notará que los enlaces del marco derecho aparecen en el mismo marco, lo que debemos
hacer es redireccionar estos enlaces usando el atributo target en el ejemplo pag4.html
que quedaría de esta manera:

Ejemplo 14:
<html>
<head> <title>P&aacute;gina de enlaces</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif" link="#000080"
vlink="magenta" alink="black">
<center> <h1> <a name="tope"> </a> Enlaces </h1> <br>
<img src="foto.jpg" alt="Foto de Claudia"><br><br>
<a href="index.html" target="principal">P&aacute;gina Principal o P&aacute;gina
Uno</a><br>
<a href="pag2.html" target="principal">P&aacute;gina Dos</a><br>
<br>
<a href="http://itabolivia.net/" target="principal">Instituto Tecnologico Ayacucho
</a><br>
<a href="mailto:[email protected]">Env&iacute;a comentarios
sobre este manual por E-Mail</a><br>
<br><br>
<a href="#tope">De vuelta arriba</a>
</center>
</body>
</html>

LIC. JONATAN HINOJOSA DELGADILLO 19

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Otras etiquetas útiles

A continuación, algunas etiquetas que pueden ser útiles al momento de elaborar las
páginas HTML. Se detalla el objetivo de cada una de las etiquetas y un ejemplo.

Etiqueta de comentarios <!-- -->

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es
utilizada para realizar acotaciones y/o comentarios.

Sintaxis de Ejemplo:
<!- - Los comentarios se introducen de esta manera - ->

Etiqueta de comentarios <comment> </comment>

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es
utilizada para realizar acotaciones y/o comentarios.

Sintaxis de Ejemplo:
<comment> Los comentarios se introducen de esta manera </comment>

Etiqueta de comentarios <address> </address>

Ofrece una manera de dr formato a un pequeño cuerpo de texto que se asemeje a la
rotulación de una carta convencional.

Sintaxis de Ejemplo:
<address>Andrés Pérez<br>
ITABOL 2282<br>
La Paz – Bolivia</address>

Etiqueta <cite> </cite>

El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita

Sintaxis de Ejemplo:
<cite>Este texto estar&aacute; inclinado</cite>

Etiqueta <code> </code>

El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono
espaciados cuando se visualiza a través de un navegador.

Sintaxis de Ejemplo:
<code>Este texto aparece con tipo de letra especial</code>

LIC. JONATAN HINOJOSA DELGADILLO 20

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Etiqueta <credit> </credit>

Esta etiqueta se emplea para indicar los créditos por el material incluido en un
documento. A menudo se asignan créditos para las fuentes e individuos que se citan en
forma directa.

Sintaxis de Ejemplo:
<credit> Foto usada bajo permiso de Jonatan Hinojosa </credit>

Etiqueta <em> </em>

Indica que se debe dar énfasis al texto que se contiene. EL navegador resaltará este texto
con negrillas e inclinación itálica.

Sintaxis de Ejemplo:
<em>Texto resaltado</em>

Etiqueta <kbd> </kbd>

La etiqueta <kbd> indica al navegador que interprete el texto especificado en una fuente
en negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada
del teclado hecha por el usuario.

Sintaxis de Ejemplo:
<kbd>Teclee su mensaje ac&aacute;:</kbd>

Etiqueta <nobr> </nobr>

La etiqueta <nobr> impide que el navegador inserte un salto de línea, incluso cuando es
adecuado el ajuste de texto. Algunas cadenas de texto no deberían romperse bajo
ninguna circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin
cortes es un URL extenso.

Sintaxis de Ejemplo:
No deseo que esta dirección URL larga sea cortada:
<nobr>http://www.itabolivia.net/irc </nobr>

Etiqueta <p> </p>

La etiqueta <p> o de párrafo, indica el inicio y el final de oraciones a exhibir con un solo
párrafo.

Sintaxis de Ejemplo:
<p>a partir de ahora definimos p&aacute;rrafos de esta manera.</p>
<p align=”center”>P&aacute;rrafo en el centro</p>
<p align=”left”>P&aacute;rrafo a la izquierda</p>
<p align=”right”>P&aacute;rrafo a la derecha</p>

LIC. JONATAN HINOJOSA DELGADILLO 21

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Etiqueta <pre> </pre>

La etiqueta <pre> significa texto “preformateado” y se usa para conservar espacios y
saltos de línea en cuerpos de texto. Esta etiqueta resulta útil en el formateo de un párrafo
completo que el autor quisiera que el navegador cliente lo exhibiese palabra por palabra.

Sintaxis de Ejemplo:
<pre>El texto que usted ve. Aparecer&aacute;
tal cual, incluidos los retornos de carro</pre>

Etiqueta <s> </s> o <strike> </strike>

Instruye al navegador que tache el texto incluido entre las etiquetas.

Sintaxis de Ejemplo:
<strike>Este texto esta tachado</strike>

Etiqueta <strong> </strong>

Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el
texto en cursivas.

Sintaxis de Ejemplo:
<strong>Este texto esta sobre saltado</strong>

Etiqueta 

Instruye al navegador que exhiba el texto especificado como subíndice.

Sintaxis de Ejemplo:
Agua: H₂0

Etiqueta 

Indica al navegador exhibir el texto especificado como super índice.

Sintaxis de Ejemplo:
Mate: 2*2 = 2².

Etiqueta <tt> </tt>

Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de
ancho fijo.

Sintaxis de Ejemplo:
<tt>Este es un tipo de letra de teletipo</tt>

LIC. JONATAN HINOJOSA DELGADILLO 22

INSTITUTO TECNOLOGICO AYACUCHO
SISTEMAS INFORMATICOS
LA PAZ – BOLIVIA

Etiqueta <var> </var>

Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de
ancho fijo.

Sintaxis de Ejemplo:
<var>Este texto será más pequeño y de formato especial</var>

Atributo bgproperties= "fixed" del BODY

Indica a su navegador que mantenga el fondo constante y no móvil de forma vertical.

Sintaxis de Ejemplo:
<body text=”#FFFFFF” bgcolor=”#000000” background=”fondo.gif” bgproperties=”fixed”>

LIC. JONATAN HINOJOSA DELGADILLO 23