UNIVERSIDAD COMPLUTENSE DE MADRID 
 

FACULTAD DE CIENCIAS DE LA DOCUMENTACIÓN 

 
 
 
 
 
 
 
 
 
 
 

 
LENGUAJE HTML 

 
CUADERNO DE TRABAJO 

 

 
 

Profesor Pedro Razquin Zazpe 
 

 

 



 

 

 
Colección “Cuadernos de Trabajo”, nº 4 
Grado en Información y Documentación 
Coordinador del título: José Luis Gonzalo Sánchez-Molero 

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
© Pedro Razquin Zazpe 
Mayo 2011 
 
ISBN: 978-84-694-3960-9 
Depósito Legal: M-35890-2011 
Edita:  Facultad de Ciencias de la Documentación 
 Universidad Complutense de Madrid 

C/ Santísima Trinidad nº 37 
 28010 Madrid 
 
Todos los derechos reservados. Este libro no podrá ser reproducido por ningún 
medio, ni total ni parcialmente, sin el previo permiso del autor y del editor. 
Documento editado para ser impreso a doble cara. 



 

3 

Tabla de contenido 

Objetivos del cuaderno ........................................................................................ 5 

ESTRUCTURA DE UN DOCUMENTO HTML .................................................... 7 

ÍNDICE DE EJERCICIOS .................................................................................... 8 

EJERCICIO 1 ...................................................................................................... 9 

EJERCICIO 2 .................................................................................................... 10 

EJERCICIO 3 .................................................................................................... 11 

EJERCICIO 4 .................................................................................................... 12 

EJERCICIO 5 .................................................................................................... 13 

EJERCICIO 6 .................................................................................................... 15 

EJERCICIO 7 .................................................................................................... 17 

EJERCICIO 8 .................................................................................................... 19 

EJERCICIO 9 .................................................................................................... 21 

EJERCICIO 10 .................................................................................................. 23 

EJERCICIO 11 .................................................................................................. 25 

EJERCICIO 12 .................................................................................................. 27 

EJERCICIO 13 .................................................................................................. 28 

EJERCICIO 14 .................................................................................................. 30 

EJERCICIO 15 .................................................................................................. 32 

EJERCICIO 16 .................................................................................................. 34 

EJERCICIO 17 .................................................................................................. 37 

 

RESULTADOS DE LOS EJERCICIOS ............................................................. 39 

EJERCICIO 1: RESULTADO ........................................................................... 40 

EJERCICIO 2: RESULTADO ........................................................................... 40 

EJERCICIO 3: RESULTADO ........................................................................... 42 

EJERCICIO 4: RESULTADO ........................................................................... 43 

EJERCICIO 5: RESULTADO ........................................................................... 44 

EJERCICIO 6: RESULTADO ........................................................................... 46 

EJERCICIO 7: RESULTADO ........................................................................... 48 

EJERCICIO 8: RESULTADO ........................................................................... 49 

EJERCICIO 9: RESULTADO ........................................................................... 52 

EJERCICIO 11: RESULTADO ......................................................................... 55 

EJERCICIO 12: RESULTADO ......................................................................... 56 



Pedro Razquin Zazpe 

4 

EJERCICIO 13: RESULTADO ......................................................................... 57 

EJERCICIO 14: RESULTADO ......................................................................... 58 

EJERCICIO 15: RESULTADO ......................................................................... 60 

EJERCICIO 16: RESULTADO ......................................................................... 62 

EJERCICIO 17: RESULTADO ......................................................................... 64 

ANEXOS ........................................................................................................... 73 

ATRIBUTOS ..................................................................................................... 74 

URL (Localizador Uniforme de Recursos) ........................................................ 76 

Reglas y recomendaciones .............................................................................. 82 

ISO 8859-1 Caracteres especiales .................................................................. 83 

 



Lenguaje HTML 

5 

 

Objetivos del cuaderno 

El  objetivo específico  de este cuaderno de trabajo es familiarizar al estudiante 
con del lenguaje HTML. Concretamente se trata de que conozca la sintaxis, las 
principales etiquetas y los atributos más habituales de este lenguaje de marcado. 

Para ello se han diseñado una serie de ejercicios prácticos  de complejidades 
creciente y  que además, al basarse en la repetición de una estructura común, 
permitan la interiorización de estos conocimientos, 

Como objetivos más generales de estas páginas conviene destacar dos: 

En primer lugar, dotar a los estudiantes de una herramienta básica para la edición 
digital y aplicable en la publicación de diversos contenidos  en un entorno web y en 
segundo lugar, sentar las bases para el posterior aprendizaje de otros lenguajes de 
marcas como XML o XHTML. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



Pedro Razquin Zazpe 

6 

 

PROCESO DE TRABAJO 

 

1. Cree una carpeta en su ordenador local llamada "ejercicios” 

2. Escriba el código HTML correspondiente a los ejercicios con el Bloc de notas 
(o cualquier editor de texto básico). 

3. Guarde cada ejercicio - en la carpeta "ejercicios"- y asigne al fichero un  
nombre y la extensión .htm.  

4. Compruebe los resultados mediante un navegador (Menú 
Archivo>Abrir>Examinar>Seleccionar el documento deseado y deberá visualizar el 
resultado).  

5. Si el documento no se visualiza -o no lo hace correctamente- puede acudir  al 
apartado Resultados de los ejercicios y compararlo con el suyo. En este apartado 
puede consultar el resultado delejercicio desde un doble punto vista: código HTML y 
visualización en el navegador.  

6.  Para corregir el código HTML deberá volver a abrir el documento con el Block 
de notas efectuar los cambios oportunos  y repetir la operación de comprobación en 
el navegador 

7.  AUTOEVALUACIÓN: Este cuaderno incluye además una prueba de 
autoevaluación (y su correspondiente resultado) que le permitirá en un solo ejercicio 
comprobar lo que ha aprendido y detectar que componentes importantes puede 
necesitar revisar.   

 

 

 

 

 

 

 

 

 



Lenguaje HTML 

7 

 

ESTRUCTURA DE UN DOCUMENTO HTML 

 

El documento html se estructura en dos secciones principales: 

Cabecera o encabezamiento ("head") y 

Cuerpo del documento ("body") 

La primera sección "Cabecera" se usa para indicar características generales o 
comunes a todo el documento. Entre ellas destacamos el título (interno) del 
documento y las metaetiquetas (autor, palabras clave) interpretadas por el 
navegador y los robots de búsqueda. El contenido de la cabecera no se visualiza en 
la navegación normal. 

La segunda sección "Cuerpo del documento" incluye la información que constituye 
el documento propiamente dicho.  

Esta información está integrada, principalmente, por texto y gráficos, pero puede 
contener además "enlaces" o vínculos que nos remitan otros documentos, 
imágenes, etc. alojados en el mismo ordenador o en un ordenador remoto. 

 

ESTRUCTURA BÁSICA DE UNA PÁGINA WEB 

<html> 

<head> 

<title>Título interno</title> 

</head> 

<body> 

Cuerpo del documento:  espacio donde se incluye el texto, las 
imágenes y los diversos enlaces y referencias  

</body> 

</html> 

 



Pedro Razquin Zazpe 

8 

 

ÍNDICE DE EJERCICIOS 

 

Ejercicio 1.  Estructura base 

Ejercicio 2.  Documento con metaetiquetas  

Ejercicio 3.  Documento con color de fondo  

Ejercicio 4.  Documento con imagen de fondo  

Ejercicio 5.  Documento estructurado en secciones   

Ejercicio 6.  Documento con una imagen  insertada y varios atributos 

Ejercicio 7.  Documento con estilos de texto  

Ejercicio 8.  Documento con listas  

Ejercicio 9.  Documento con tabla 

Ejercicio 10. Documento con galería  de imágenes  

Ejercicio 11. Documento con marco interno (iframe) 

Ejercicio 12. Documento  con enlaces externos  

Ejercicio 13. Documento con enlaces (distintos tipos de protocolo)  

Ejercicio 14. Documento con enlaces (distintos tipos de fichero) 

Ejercicio 15. Documento con enlaces y atributos 

Ejercicio 16. Documento con enlaces internos (FAQ) 

Ejercicio 17.  Página principal (index.htm ) 



Lenguaje HTML 

9 

EJERCICIO 1 

Documento simple (Estructura base) 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Aprender el orden de anidamiento de las etiquetas básicas 
 Diferenciar las dos partes principales del documento: cabecera y cuerpo 

 

Etiquetas empleadas 

<html> </html> 
<head> </head> 
<title>  </title> 
<body> </body>  
Orden  de anidamiento: 
<html>  
        <head> 
         <title>  </title> 
        </head> 
        <body>  
        </body>  
</html> 

INSERTAR  LOS SIGUIENTES TEXTOS: 

 Ejercicio 1 en etiqueta <title>  </title> 
 Estructura básica de un documento en etiqueta <body> </body> 

 

Esta estructura base se repetirá en el resto de los ejercicios y se irá 
complicando  progresivamente añadiendo nuevas etiquetas. 

  



Pedro Razquin Zazpe 

10 

EJERCICIO 2 

Documento con metadatos 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Añadir metaetiquetas (metadatos) al documento HTML 
 Comprender que la información incluida en la cabecera es invisible a simple vista 

 

Etiquetas empleadas 

Etiquetas básicas 
<html></html> 
<head></head> 
<title> </title> 
<body> </body>  
 
Etiquetas nuevas 
<meta name="author" content="Luis, Ana"> 
<meta name="keywords" content="escritores, literatura, Europa"> 
<meta name="description" content="espacio dedicado a la literatura europea del siglo 
XX"> 

INSERTAR  LOS SIGUIENTES TEXTOS: 

Ejercicio 2 en etiqueta <title>  </title> 

Ejercicio 2: Estructura básica de un documento html  con METADATOS: autor, 
palabras clave y resumen en etiqueta <body> </body> 

 

Las metaetiquetas se incluyen en <HEAD> y son invisibles al 
usuario normal. Son metadatos, es decir, información acerca del 
documento. 



 

11 

EJERCICIO 3 

Documento con color de fondo 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Entender la sintaxis y el funcionamiento de los atributos 
 Poner un color de fondo al documento 

 

Etiquetas empleadas 

Etiquetas básicas:  

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

 Etiquetas o atributos nuevos:  

<body bgcolor="grey"> 

Atributo Significado Aplicación 
bgcolor= color de fondo Aplicado al cuerpo,  pone un color de fondo 

distinto del blanco 

INSERTAR  LOS SIGUIENTES TEXTOS: 

Ejercicio 3 en etiqueta <title>  </title> 

Insertar  el atributo bgcolor="grey" en la etiqueta de apertura  de <body> 

Ejercicio 3: Documento con color de fondo gris en etiqueta <body> </body> 

 

  



Pedro Razquin Zazpe 

12 

 EJERCICIO 4                                                                                     

 

Documento con imagen de fondo 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Poner una imagen de fondo al documento 
 Entender la sintaxis y el funcionamiento de los atributos 

 

Etiquetas empleadas 

Etiquetas básicas  
<html></html> 
<head></head> 
<title> </title> 
<body> </body  

Etiquetas o atributos nuevos  

<body background="logoucm.gif "> 

Atributo Significado Aplicación 
background= imagen de fondo Aplicado al cuerpo,  pone un imagen de fondo 

al documento 

INSERTAR  LOS SIGUIENTES TEXTOS: 

 Ejercicio 4 en etiqueta <title>  </title> 
 Insertar  el atributo background="nombre de la imagen" en la etiqueta de apertura  

de <body> 
 Ejercicio 4: Documento con imagen de fondo  en etiqueta <body> </body> 

 

Para este ejercicio necesitan disponer de una imagen y guardarla 
en la misma carpeta (directorio) donde está el ejercicio. 

La imagen del ejemplo puede descargarse de Google 

 



Lenguaje HTML 

13 

EJERCICIO 5 

Documento  estructurado en secciones   

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Estructurar el documento en apartados y subapartados (uso de encabezamientos) 
 Facilitar accesibilidad de los contenidos 

 

Etiquetas empleadas 

Etiquetas básicas 

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

Etiquetas nuevas 

<h1> </h1>  Encabezado nivel 1 

<h2> </h2>  Encabezado nivel 2 

(Nota: Los encabezados posibles van desde el h1 al h6, aunque en el 
ejemplo sólo se usan los dos primeros)   

<br>  Salto de línea, espaciado simple entre las líneas 

(Nota: Esta es  una etiqueta simple, no lleva etiqueta de cierre)  

 

La función de los encabezados es estructurar el documento en 
secciones y subsecciones. Es decir, jerarquizar los contenidos. 

Es un error muy común usarlos para obtener textos de mayor o 
menor tamaño. Este uso no es correcto. 



Pedro Razquin Zazpe 

14 

INSERTAR  LOS SIGUIENTES TEXTOS: 

Ejercicio 5 en etiqueta <title>  </title> 

En el cuerpo (etiqueta <body>  </body>) 

Ejercicio 5: Documento  estructurado en secciones   

Curriculum vitae como <H1>  

Datos personales como <H2> > 

Nombre con un salto de línea <br> detrás  

Fecha de nacimiento con un salto de línea <br> detrás 

Dirección con un salto de línea <br> detrás 

Teléfono con un salto de línea <br> detrás  

Correo electrónico con un salto de línea <br> detrás 

Datos académicos como <H2>  

Título con un salto de línea <br> detrás 

Universidad con un salto de línea <br> detrás 

Fechas con un salto de línea <br> detrás  

Experiencia profesional  como <H2>  

Empresa con un salto de línea <br> detrás  

Puesto de trabajo con un salto de línea <br> detrás 

Años con un salto de línea <br> detrás 

Otros datos de interés  como <H2>  

Idiomas con un salto de línea <br> detrás 

Aficiones con un salto de línea <br> detrás  



Lenguaje HTML 

15 

EJERCICIO 6 

Documento con estilos de texto 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Organizar el texto en párrafos y bloques de texto 
 Conocer y aplicar estilos de texto: negrita, cursiva y subrayado 

 

Etiquetas empleadas 

Etiquetas básicas 

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

 

Etiquetas nuevas 

<p> </p>   Párrafo, genera espaciado doble entre las líneas 

<br>  Salto de línea, espaciado simple entre las líneas  

(Atención: Etiqueta simple, no lleva etiqueta de cierre) 

<b> </b> Negrita  

<i>  </i> Cursiva  

<u> </u> Subrayado 

(Atención: El subrayado de texto se usa poco en la web porque se 
asocia normalmente a los vínculos) 



Pedro Razquin Zazpe 

16 

 

INSERTAR  LOS SIGUIENTES TEXTOS: 

 Ejercicio 6  en etiqueta <title>  </title> 

En el cuerpo  (etiqueta <body> </body>) 

 Ejercicio 6 : Documento con estilos de texto con un salto de línea <br> detrás 

Tres párrafos con el siguiente contenido  

Párrafo 1 

Metadatos (aplicar negrita y salto de línea) 

Un metadato no es más que un dato estructurado sobre la información, o sea, 
información sobre información. Los metadatos en el contexto de la Web, son datos 
que se pueden guardar, intercambiar y procesar por medio del ordenador y que 
están estructurados de tal forma que permiten ayudar a la identificación, 
descripción clasificación y localización del contenido de un documento o recurso web 
y que, por tanto, también sirven para su recuperación 

Párrafo 2 

Metadatos en HTML  (aplicar negrita y salto de línea) 

La mayoría de los metadatos están incrustados dentro de los recursos de la Web. Si 
queremos crear páginas web con propósito general y únicamente para facilitar la 
búsqueda y recuperación de nuestros documentos, no es necesario utilizar un 
lenguaje muy estructurado ni un sistema muy sofisticado de metadatos, basta con 
utilizar las etiquetas META que pueden ser embebidas dentro del propio documento  

Párrafo 3  

Fuente: Hipertexto: El nuevo concepto de documento en la cultura de la imagen de 
María Jesús Lamarca Lapuente ((aplicar  cursiva  al título de obra) 

 

 

 



Lenguaje HTML 

17 

EJERCICIO 7 

Documento con una imagen  insertada  

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Insertar imágenes en el documento 
 Aplicar varios atributos a una misma etiqueta  
 Conocer los principales atributos de una imagen 

 

Etiquetas empleadas 

Etiquetas básicas  

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

Etiquetas  y atributos nuevos 

<img>  Etiqueta IMAGEN 

(Nota: Esta es  una etiqueta simple, no lleva etiqueta de cierre)  

<img src="logoucm.gif" alt="Logotipo UCM" border="1" width="150" heigth="375"> 

Explicación de los atributos: 

Atributo  Significado Aplicación 
src= Origen (o fuente) Indica la ubicación y nombre de la imagen 
alt= Representación 

alternativa   
Texto que describe la imagen  
(facilita la accesibilidad) 

border=  Borde Indica el grosor del borde (en   puntos) 
width= Ancho Anchura  de la imagen 
heigth= Altura Altura de la imagen 



Pedro Razquin Zazpe 

18 

INSERTAR  LOS SIGUIENTES TEXTOS y ETIQUETAS  

 Ejercicio 7 en etiqueta <title>  </title> 

En el cuerpo (etiqueta <body> </body>) 

 Documento con una imagen insertada  con un salto de línea <br> detrás 

 <img src="nombre del imagen" alt="Logotipo UCM" border="1" width="150" 

heigth="375">  

 

 

Para este ejercicio necesitan disponer de una imagen y guardarla 
en la misma carpeta (directorio) donde está el ejercicio. 

La imagen del ejemplo puede descargarse de Google 

  



Lenguaje HTML 

19 

EJERCICIO 8 

Documento con listas 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Organizar el contenido en listas: sin ordenar y numeradas 
 Mejorar la accesibilidad del contenido 

 

Etiquetas empleadas 

Etiquetas básicas 

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

Etiquetas nuevas 

<ul>  </ul>  Lista sin ordenar  

<ol>  </ol>  Lista ordenada (numerada)  

<li>   </li>   Elemento de la lista 

Orden  de anidamiento: 

<ul>   

<li> Elemento 1 </li>   

<li> Elemento 2 </li>     

<li> Elemento 3 </li>    

</ul> 

<ol>   

<li> Elemento 1 </li>   

<li> Elemento 2 </li>     

<li> Elemento 3 </li>    

</ol>   



Pedro Razquin Zazpe 

20 

INSERTAR  LOS SIGUIENTES TEXTOS: 

 Ejercicio 8 en etiqueta <title>  </title> 

En el cuerpo (en etiqueta <body> </body>) 

 Documento con listas  en negrita y con un salto de línea detrás 

Crear 2 listas con los siguientes textos y elementos: 

 Principales lenguajes de marcas: (Lista sin ordenar) 

SGML  

HTML  

XML   

XHTML 

DHTML  

 Principales lenguajes de marcas: (Lista numerada) 

SGML  

HTML  

XML   

XHTML 

DHTML  

 

 



Lenguaje HTML 

21 

EJERCICIO 9 

Documento con tabla 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Conocer las etiquetas básicas de la tabla y su orden de anidamiento 
 Insertar una tabla  en el documento 

 

Etiquetas empleadas 

Etiquetas básicas 

<html> </html> 

<head></head> 

<title> </title> 

<body> </body>  

 

Etiquetas nuevas (explicación) 

Etiqueta  Significado  Aplicación  
<table> </table> Tabla Indica principio y final de una tabla 
<tr> </tr> Fila Indica principio y final de una fila 
<td> </td> Celda Indica principio y final de una celda 

 

Orden  de anidamiento: 
<table>  
        <tr> 
            <td>  </td> 
            <td>  </td> 
        </tr>  

</table> 



Pedro Razquin Zazpe 

22 

INSERTAR LOS SIGUIENTES TEXTOS Y ETIQUETAS  

 Ejercicio 9 en etiqueta <title>  </title> 

En el cuerpo (etiqueta <body> </body) 

 Documento con tabla  seguido de una salto de línea  

 Insertar una tabla de una fila y 3 celdas y el atributo border=”1” 

 Insertar los textos Celda 1 ,  Celda 2,  Celda 3 en las celdas correspondientes 

 

 

 



Lenguaje HTML 

23 

EJERCICIO 10 

Documento con galería  de imágenes  

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Combinar una tabla  y una serie de imágenes 
 Conocer atributos de la tabla  
 Usar medidas porcentuales 

 

Etiquetas empleadas 

Etiquetas básicas 

<html> </html> 

<head></head> 

<title> </title> 

<body> </body>  

Etiquetas  nuevas  

<table> </table> 

<tr> </tr> 

<td> </td> 

<img> (etiqueta simple, no leva etiqueta de cierre) 

Atributos nuevos 

Atributo Significado Aplicación 
width=  Anchura (expresada en porcentaje) Indica anchura de tabla y/o celda 
align=  Alineación Indica posición del contenido de 

celda: derecha, centro o 
izquierda 

  



Pedro Razquin Zazpe 

24 

    

INSERTAR LOS SIGUIENTES TEXTOS Y ETIQUETAS  

 Ejercicio 10 en etiqueta <title>  </title> 
 Documento con galería de imágenes en etiqueta <body> </body> 
 <table border=”1” width=”80%”> 

<tr> 
<td width="30%" align="center"><img src=”imagen1”></td> 
<td width="30%" align="center"><img src=”imagen2”></td> 

<td width="30%" align="center"><img src=”imagen3”></td> 

<tr> 
<td width="30%" align="center"><img src=”imagen4”></td> 
<td width="30%" align="center"><img src=”imagen5”></</td> 

<td width="30%" align="center"><img src=”imagen6”></td 
</tr></table> 

 

 

Para este ejercicio necesitan disponer de seis (6) imágenes y 
guardarlas en la misma carpeta donde está el ejercicio 

Para lograr un mejor resultado las imágenes deben tener un 
tamaño igual o similar 

Las imágenes empleadas en el ejemplo pueden descargarse de 
Google 

 



Lenguaje HTML 

25 

EJERCICIO 11 

Documento con marco interno (iframe) 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Aprender la etiqueta iframe y su características 
 Incluir una marco dentro de nuestro documento 

 

Etiquetas empleadas 

Etiquetas básicas  

<html></html> 

<head></head> 

<title> </title> 

<body> </body  

Etiquetas y atributos nuevos:  

 <iframe> </iframe> 

Explicación de los atributos: 

Atributo  Significado Aplicación 
src= Origen (o fuente) Indica la ubicación y nombre de fichero que se muestra 

dentro del marco 
name= Nombre   Texto identifica al marco  

(permite que un enlace se abra dentro del marco) 
frameborder=  Borde Indica el grosor del borde del marco (en  puntos) 
width= Ancho Anchura  del marco 
heigth Altura Altura del marco 
scrolling= Barra de 

desplazamiento 
Indica si el marco  

 

INSERTAR LOS SIGUIENTES TEXTOS Y ETIQUETAS  



Pedro Razquin Zazpe 

26 

 Ejercicio 11 en etiqueta <title>  </title> 

En el cuerpo (etiqueta <body> </body) 

 Documento con marco interno  seguido de una salto de línea <br> 

 <iframe name="marco1" src="http://www.bne.es" width=”600” height=”600”   

frameborder=1 scrolling="yes"> </iframe> 

 

 

Esta  técnica permite mostrar en el marco cualquier documento. 

Se puede mostrar un documento por defecto, es decir, nada más 
cargar la página (como en el ejemplo) o un documento que se vea 
en su interior al activar un enlace. 

Es la técnica que se usa para insertar vídeos de YouTube en los 
documentos. 

 

 

 



Lenguaje HTML 

27 

EJERCICIO 12 

Documento  con enlaces externos (con recursos ajenos) 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Comprender el funcionamiento  de la dirección web (URL ) 
 Vincular nuestro documento con otras páginas  

 

Etiquetas empleadas 

 
Etiquetas básicas  
<html></html> 
<head></head> 
<title> </title> 
<body> </body>  
 
Etiquetas nuevas  
<a href="url"> Texto del enlace </a>  

Nota: Si no comprende el significado de URL o su funcionamiento puede 
consultar el apéndice correspondiente 

<br>    Salto de línea 
INSERTAR  LOS SIGUIENTES TEXTOS: 

Ejercicio 12  en etiqueta <title>  </title> 
En el cuerpo (etiqueta <body> </body>) 

 Enlaces con bibliotecas   seguido de una salto de línea <br> 
 4  enlaces con direcciones reales  (URL) de bibliotecas  



Pedro Razquin Zazpe 

28 

EJERCICIO 13 

Documento con enlaces (usando distintos tipos de protocolo) 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Entender el funcionamiento de la dirección web (URL ) 
 Comprender los distintos tipos de protocolos de acceso (https,  ftp, mailto...) 
 Vincular nuestro documento con  recursos externos 

 

ETIQUETAS EMPLEADAS 

Etiquetas básicas 

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

Etiquetas nuevas 

<a href="url"> Texto del enlace</a>  

Nota: Si no comprende el significado de URL o su funcionamiento 
puede consultar el apéndice correspondiente 

<br>   Salto de línea 

Nota: Esta es una etiqueta simple, no lleva etiqueta de cierre 

 



Lenguaje HTML 

29 

 

INSERTAR  LOS SIGUIENTES TEXTOS: 

Ejercicio 13  en etiqueta <title>  </title> 

En el cuerpo (en etiqueta <body> </body>) 

Enlaces usando distintos protocolos seguido de un salto de línea <br> 

4 enlaces :  

Campus Virtual UCM  https://www.ucm.es/campusvirtual/CVUCM/index1.php 

RedIRIS      ftp://ftp.rediris.es/ 

Correo electrónico        mailto:prazquin@pdi.ucm.es 

BBS        telnet://bbs.beholder.org::23 

  



Pedro Razquin Zazpe 

30 

EJERCICIO 14 

Documento con enlaces (con distintos tipos de fichero) 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Entender el sistema URL (dirección web) 
 Vincular el documento con distintos tipos de fichero: pdf,  mp3, gif, zip… 

 

Etiquetas empleadas 

Etiquetas básicas 

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

Etiquetas nuevas 

<a href="url"> Texto del enlace</a>  

Nota: Si no comprende el significado de URL o su funcionamiento 
puede consultar el apéndice correspondiente. 

<br>  Salto de línea 

Nota: Esta es una etiqueta simple, no lleva etiqueta de cierre 

 



Lenguaje HTML 

31 

INSERTAR  LOS SIGUIENTES TEXTOS y ETIQUTAS: 

Ejercicio 14  en etiqueta <title>  </title> 

En el cuerpo ( etiqueta <body> </body>) 

Enlaces con distintos tipos de fichero  seguido de un  salto de línea <br> 

<a href="apuntes.pdf"> Ver PDF</a> <br> 

<a href="logoucm.gif"> Ver imagen</a><br> 

<a href="apuntes.zip"> Descargar ZIP</a><br> 

<a href="donovan.mp3"> Oir música</a><br> 

 

 

 

Para este ejercicio necesitan disponer de 4 FICHEROS y 
guardarlos en la misma carpeta donde está el ejercicio 

Los ficheros empleados en el ejemplo son un zip, un pdf, un mp3 y 
un gif. 

Los ficheros pueden descargarse de Internet y/o crearse para la 
práctica. 

 

  



Pedro Razquin Zazpe 

32 

EJERCICIO 15 

Documento con enlaces y atributos 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Entender el sistema URL (dirección web) 
 Aplicar atributos al enlace 
 Activar un enlace mediante una imagen 

 

Etiquetas empleadas 

Etiquetas básicas 

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

 

Etiquetas y atributos nuevos 

<a href="url"> Texto del enlace</a>  

Nota: Si no comprende el significado de URL o su funcionamiento puede 
consultar el apéndice correspondiente 

<a href="url"> <img src=”nombre de la imagen”></a>  

Nota: Este un ejemplo de anlace activado por una imagen correspondiente 



Lenguaje HTML 

33 

Explicación de los atributos 

Atributo  Significado Aplicación 
target= Destino Indica donde se abrirá el  enlace.  

Los valores más habituales son: 

_blank (se abre en una página aparte) 

_self ( se abre en la misma ventana) Este es el valor por 
defecto, se aplica cuando no se indica nada 

nombre_del_marco (se abre en el marco que indica el 
nombre)   

title= Título del enlace  Texto que describe el enlace, es visible  al colocar el 
cursor sobre el enlace (facilita la accesibilidad) 

 

INSERTAR  LOS SIGUIENTES TEXTOS y ETIQUETAS: 

Ejercicio 15  en etiqueta <title>  </title> 

En el cuerpo  (etiqueta <body> </body) 

Documento con enlaces y atributos  seguido de un salto de línea <br> 

Enlace con la Universidad Autónoma de Barcelona (http://wwww.uab.es) y 
target=”_self” seguido de un salto de línea <br> 

 Enlace con la Universidad Autónoma de Madrid (http://www.uam.es)  y 
target=”_blank” seguido de un salto de línea <br> 

Enlace con la Universidad de Valencia (http://www.uv.es) ) con target=”_blank” y 
title=” Conecta_ con_ la_ Universidad_de_Valencia”  seguido de un salto de línea 
<br> 

Enlace con la UCM  (http://www.ucm.es)  activado por UNA IMAGEN  (logotipo  
UCM) 

 

 

Para apreciar  el funcionamiento de estos atributos es necesario 
consultar el resultado del ejercicio a través del navegador y pulsar 
sobre los enlaces. 

 

  



Pedro Razquin Zazpe 

34 

EJERCICIO 16 

Documento con enlaces internos (marcadores) 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Insertar enlaces internos (dentro de un mismo documento)  
 Familiarizarse con la estructura de las FAQ (Preguntas más frecuentes)   

 

Etiquetas empleadas 

Etiquetas básicas 

<html></html> 

<head></head> 

<title> </title> 

<body> </body>  

Etiquetas y atributos nuevos 

<a href="#marca1">Pregunta 1</a>   Enlace a marca 

<a name="marca1">Respuesta 1</a>  Marca oculta  

Explicación de los atributos 

Nombre  Significado Aplicación 
name= nombre Permite insertar una marca oculta en una determinada 

parte del documento. Este nombre no debe repetirse en 
el mismo documento, ni debe contener espacios en 
blanco o caracteres especiales. 

 

 

El nombre de la marca usado en el enlace debe ir siempre 
precedido por el símbolo #. 



Lenguaje HTML 

35 

INSERTAR  LOS SIGUIENTES TEXTOS: 

Ejercicio 16  en etiqueta <title>  </title> 

En el cuerpo (etiqueta <body>  </body>) 

Documento con enlaces internos (FAQ) como  <h1> 

Pregunta 1: ¿Qué es el HTML? con enlace a la marca1 y seguido un salto de línea 
<br> 

Pregunta 2: ¿Quién inventó el HTML? con enlace a la marca2 y seguido un salto de 
línea <br> 

Pregunta 3. ¿Cómo se diferencia una etiqueta HTML del texto normal? con 
enlace a la marca3 y seguido un salto de línea <br> 

Pregunta 4: ¿Para que se utiliza el símbolo #? con enlace a la marca4 y seguido un 
salto de línea <br> 

Pregunta 5: ¿Qué otros lenguajes de marcas existen? con enlace a la marca5 y 
seguido un salto de línea <br> 

Respuesta 1: insertar marca1 y seguido un salto de línea <br> 

Es el Lenguaje de Marcas de Hipertexto, las siglas se corresponden con  
HyperText Markup Language. Es el lenguaje predominante para la creación de 
páginas web. Se usa para describir el formato (tipo de letra, color, tamaño, 
etc…) y la estructura del documento web (cabecera, cuerpo…) e indica al 
programa navegador (Explorer, Firefox, Chrome…) como debe ser visualizado 
el documento en la pantalla. 

Respuesta 2: insertar marca2 y seguido un salto de línea <br> 

Fue desarrollado en 1991 por Tim Berners-Lee en la Organización Europea para 
la Investigación Nuclear (CERN). Su finalidad inicial era distribuir e 
intercambiar información entre los investigadores de una manera fácil. 

Respuesta 3: insertar marca3 y seguido un salto de línea <br> 

Las etiquetas u órdenes van rodeadas de los símbolos mayor que y menor que 
(<>), a diferencia del texto normal que escribe directamente. 

Respuesta 4: insertar marca4 y seguido un salto de línea <br> 

El símbolo # (almohadilla o numeral) se utiliza para insertar marcadores o 
marcas ocultas en cuerpo del documento. Estos marcadores indican una posición 
concreta dentro de un documento y permiten establecer vínculos o enlaces con 
esa posición concreta. 



Pedro Razquin Zazpe 

36 

Respuesta 5: insertar marca5 y seguido un salto de línea <br> 

Hay muchos lenguajes de marcas. Los principales son: SGML (Standard 
Generalized Markup Language) el padre de todos los lenguajes. XML  (Extensible 
Markup Language) es el lenguaje de marcado ampliable o extensible y XHTML, 
una mezcla de HTML y XML. 



Lenguaje HTML 

37 

EJERCICIO 17 

Página principal (index) 

 

 
Objetivos de aprendizaje 

 Crear la estructura básica de un documento HTML (página web) 
 Crear una página principal (index.htm) para un grupo de documentos 
 Inserta un índice con vínculos al resto de los documentos (ejercicios) que permita su 

consulta (navegación) de forma fácil 

 

Etiquetas empleadas 

Etiquetas básicas 
<html></html> 
<head></head> 
<title> </title> 
<body> </body>  
Etiquetas nuevas 
<a href="URL">Texto del enlace</a>  
INSERTAR  LOS SIGUIENTES TEXTOS: 
Ejercicio 17  en etiqueta <title>  </title> 
En el cuerpo (etiqueta <body>  </body>) 
Página principal  como un <H1> 
Insertar  16 enlaces  (1 con cada uno de los 16 ejercicios ) siguiendo el siguiente 
esquema : 
<a href="ejercicio1.htm">Ejercicio 1. Estructura base</a>  seguido de un salto de 
línea <br> 

<a href="ejercicio2.htm">Ejercicio 2. Documento con metaetiquetas</a>  seguido 
de un salto de línea <br> y así sucesivamente… 



Pedro Razquin Zazpe 

38 

 



Lenguaje HTML 

39 

 

 

 

 

 

 

 

RESULTADOS DE LOS EJERCICIOS 



Pedro Razquin Zazpe 

40 

EJERCICIO 1: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE  

 
<html>  

<head>  

<title> Ejercicio 1 </title> 

</head> 

<body>  

Estructura básica de un documento  

</body>  

</html> 

 

 



Lenguaje HTML 

41 

EJERCICIO 2: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio 2 </title> 

<meta name="author" content="nombre del estudiante"> 

<meta name="keywords" content="escrtores, literatura, Europa"> 

<meta name="description" content="espacio dedicado a la literatura europea del siglo 
XX"> 

</head> 

<body>  

Ejercicio 2: Estructura básica de un documento html  con METADATOS: autor, 
palabras clave y resumen 

</body>  

</html> 

 

 



Pedro Razquin Zazpe 

42 

EJERCICIO 3: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio  3 </title> 

</head> 

<body bgcolor=”grey”>  

Ejercicio 3: Documento con color de fondo gris 

</body>  

</html> 



Lenguaje HTML 

43 

EJERCICIO 4: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio  4 </title> 

</head> 

<body background=”logoucm.gif”>  

Ejercicio 4: Documento con imagen de fondo 

</body>  

</html> 

 



Pedro Razquin Zazpe 

44 

EJERCICIO 5: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 



Lenguaje HTML 

45 

EJERCICIO 5: RESULTADO 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio 5 </title> 

</head> 

<body>  

Ejercicio 5: Documento  estructurado en secciones 

<h1> Curriculum vitae</h1> 

<h2>Datos personales </h2> 

Nombre <br> 

Fecha de nacimiento <br> 

Dirección <br> 

Teléfono <br> 

Correo electrónico <br> 

<h2>Datos académicos </h2> 

Título <br> 

Universidad<br> 

Fechas<br> 

<h2>Experiencia profesional </h2> 

Empresa <br> 

Puesto de trabajo<br> 

Años<br> 

<h2>Otros datos de interés  </h2>  

Idiomas <br> 

Aficiones  <br> 

</body>  

</html> 

 



Pedro Razquin Zazpe 

46 

EJERCICIO 6: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

       



Lenguaje HTML 

47 

EJERCICIO 6: RESULTADO 

 
Punto de vista del CÓDIGO FUENTE  

 
<html>  

<head>  

<title> Ejercicio 6 </title> 

</head> 

<body>  

Ejercicio 6: Documento con estilos de texto <br> 

<p> 

<b>Metadatos</b> <br> 

Un metadato no es más que un dato estructurado sobre la información, o sea, 
información sobre información. Los metadatos en el contexto de la Web, son datos 
que se pueden guardar, intercambiar y procesar por medio del ordenador y que están 
estructurados de tal forma que permiten ayudar a la identificación, descripción 
clasificación y localización del contenido de un documento o recurso web y que, por 
tanto, también sirven para su recuperación</p> 

<p> 

<b>Metadatos en HTML</b><br> 

La mayoría de los metadatos están incrustados dentro de los recursos de la Web. Si 
queremos crear páginas web con propósito general y únicamente para facilitar la 
búsqueda y recuperación de nuestros documentos, no es necesario utilizar un 
lenguaje muy estructurado ni un sistema muy sofisticado de metadatos, basta con 
utilizar las etiquetas META que pueden ser embebidas dentro del propio documento 
</p> 

<p>Fuente: <i>Hipertexto: El nuevo concepto de documento en la cultura de la 
imagen</i> de María Jesús Lamarca Lapuente</p> 

</body>  

</html> 

 



Pedro Razquin Zazpe 

48 

EJERCICIO 7: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio  7 </title> 

</head> 

<body >  

Documento con una imagen insertada <br> 

<img src="logoucm.gif" alt="Logotipo UCM" border="1" width="150" heigth="375"> 

</body>  

</html> 

       



Lenguaje HTML 

49 

EJERCICIO 8: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

       



Pedro Razquin Zazpe 

50 

EJERCICIO 8: RESULTADO
 

 
Punto de vista del CÓDIGO FUENTE  

 
<html>  

<head>  

<title> Ejercicio 8 </title> 

</head> 

<body>  

<b>Documento con listas </b><br> 

Principales lenguajes de marcas: (Lista sin ordenar) 

<ul>  

<li>SGML  </li>  

<li>HTML </li>  

<li>XML  </li>  

<li> XHTML </li>  

<li>DHTML </li> 

 </ul>   

Principales lenguajes de marcas: (Lista numerada) 

<ol> 

<li>SGML   </li>  



Lenguaje HTML 

51 

<li>HTML   </li>  

<li> XML </li> 

<li> XHTML </li>  

<li> DHTML  </li>  

</ol>  

</body>  

</html> 
 



Pedro Razquin Zazpe 

52 

EJERCICIO 9: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  
<head>  
<title> Ejercicio  9 </title> 
</head> 
<body >  
Documento con tabla <br> 
<table border=”1”> 
<tr> 
<td>Celda 1</td> 
<td>Celda 2</td> 
<td>Celda 3</td> 
</tr> 
</table> 
</body> > 
</html> 

 

 



Lenguaje HTML 

53 

EJERCICIO 10: RESULTADO 

 
Punto de vista del NAVEGADOR 

 



Pedro Razquin Zazpe 

54 

EJERCICIO 10: RESULTADO 

 
Punto de vista del CÓDIGO FUENTE  

 
<html>  

<head>  

<title> Ejercicio  10 </title> 

</head> 

<body >  

Documento con galería de imágenes  <br> 

<table border=”1” width=”80%”> 

<tr> 

<td width="30%" align="center"><img src=biblio.jpg></td> 

<td width="30%" align="center"><img src=logoucm.gif></td> 

<td width="30%" align="center"><img src=psico.jpg></td> 

<tr> 

<td width="30%" align="center"><img src=cursoverano.jpg></td> 

<td width="30%" align="center"><img src="venus.jpg" ></td> 

<td width="30%" align="center"><img src="verano2.jpg"></td> 

</tr> 

</table> 

</body>  > 



Lenguaje HTML 

55 

EJERCICIO 11: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  
<head>  
<title> Ejercicio  11 </title> 
</head> 
<body >  
Documento con marco incorporado (interno)  <br> 
<iframe name="marco1" src="http://www.bne.es" width=800 height=600  
frameborder=1 scrolling="yes">   
</iframe> 
</body> 
</html>  

       

 



Pedro Razquin Zazpe 

56 

EJERCICIO 12: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE  

 
<html> 

<head> 

<title>Ejercicio 12</title> 

</head>  

<body>    

Enlaces con bibliotecas <br> 

<a href="http://www.bne.es"> Biblioteca Nacional </a><br> 

<a href="http://www.ucm.es/BUCM/"> Biblioteca UCM </a><br> 

<a href="http://bibliotecas.csic.es/">Bibliotecas CSIC</a><br> 

<a href="http://www.loc.gov/index.html">Biblioteca del Congreso (Washington) </a> 

<br> 

</body> 

</html> 

 

 



Lenguaje HTML 

57 

EJERCICIO 13: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio  13 </title> 

</head> 

<body >  

Enlaces usando distintos protocolos <br> 

<a href="https://www.ucm.es/campusvirtual/CVUCM/index1.php">Campus Virtual 

(acceso http seguro)</a><br> 

<a href="ftp:/ftp.rediris.es">RedIRIS (acceso ftp)</a><br> 

<a href="mailto:prazquin@pdi.ucm.es">Acceso Mail</a><br> 

<a href="telnet://bbs.beholder.org:23"> BBS (acceso telnet) </a> 

</body>  

</html> 

 

 

 



Pedro Razquin Zazpe 

58 

EJERCICIO 14: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio  14 </title> 

</head> 

<body >  

Enlaces con distintos tipos de ficheros  <br> 

<a href="apuntes.pdf"> Ver PDF</a> <br> 

<a href="logoucm.gif"> Ver imagen</a><br> 



Lenguaje HTML 

59 

<a href="apuntes.zip"> Descargar ZIP</a><br> 

<a href="donovan.mp3"> Oir música</a><br> 

</body> 

</html> 



Pedro Razquin Zazpe 

60 

EJERCICIO 15: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 



Lenguaje HTML 

61 

EJERCICIO 15: RESULTADO 

 
Punto de vista del CÓDIGO FUENTE 

 
<html>  

<head>  

<title> Ejercicio 15 </title> 

</head> 

<body >  

Documento con enlaces y atributos <br>  

<a href="http://www.uab.es" target="_self">Universidad Autónoma de Barcelona</a> 

<br> 

<a href="http://www.uam.es" target=”_blank”>Universidad Autónoma de Madrid</a> 

<br> 

<a href="http://www.uv.es" target=”_blank” title="Conecta_con_ 

la_Universidad_de_Valencia">Universidad de Valencia </a> <br> 

<a href="http://www.ucm.es" title=”Conecta_con_UCM”><img src="logoucm.gif"> 

</a> <br> 

</body>  

</html> 

 

 



Pedro Razquin Zazpe 

62 

EJERCICIO 16: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 



Lenguaje HTML 

63 

EJERCICIO 16: RESULTADO 

 
Punto de vista del CÓDIGO FUENTE  

 
<html>  
<head>  
<title> Ejercicio 16 </title> 
</head> 
<body >  
<h1>Documento con enlaces internos (FAQ) </h1> 
<a href="#marca1">Pregunta 1: ¿Qué es el HTML?</a> <br> 
<a href="#marca2">Pregunta 2: ¿Quién inventó el HTML?</a><br> 
<a href="#marca3">Pregunta 3. ¿Cómo se diferencia una etiqueta HTML del text
normal?</a><br> 
<a href="#marca4">Pregunta 4: ¿Para que se utiliza el símbolo #? </a><br> 
<a href="#marca5">Pregunta 5: ¿Qué otros lenguajes de marcas existen?</a><br><br>
<a name="marca1">Respuesta 1:</a> 
<p>Es el Lenguaje de Marcas de Hipertexto, las siglas se corresponden con  HyperTex
Markup Language. Es el lenguaje predominante para la creación de páginas web. Se us
para describir el formato (tipo de letra, color, tamaño, etc…) y la estructura de
documento web (cabecera, cuerpo…) e indica al programa navegador (Explorer
Firefox, Chrome…) como debe ser visualizado el documento en la pantalla.</p> 
<a name="marca2">Respuesta 2:</a> 
<p>Fue desarrollado en 1991 por Tim Berners-Lee en la Organización Europea para l
Investigación Nuclear (CERN). Su finalidad inicial era distribuir e intercambia
información entre los investigadores de una manera fácil.</p> 
<a name="marca3">Respuesta 3:</a> 
<p>Las etiquetas u órdenes van rodeadas de los símbolos mayor que y menor que (<>)
a diferencia del texto normal que se escribe directamente.</p> 
<a name="marca4">Respuesta 4:</a> 
<p>El símbolo # (almohadilla o numeral) se utiliza para insertar marcadores o marca
ocultas en cuerpo del documento. Estos marcadores indican una posición concret
dentro de un documento y permiten establecer vínculos o enlaces con esa posició
concreta.</p> 
<a name="marca5">Respuesta 5:</a> 
<p>Hay muchos lenguajes de marcas. Los principales son: SGML (Standar
Generalized Markup Language) el padre de todos los lenguajes. XML  (Extensibl
Markup Language) es el lenguaje de marcado ampliable o extensible y XHTML, un
mezcla de HTML y XML.</p> 
</body>  
</html> 

 

 

 

 



Pedro Razquin Zazpe 

64 

EJERCICIO 17: RESULTADO 

 
Punto de vista del NAVEGADOR 

 

 



Lenguaje HTML 

65 

EJERCICIO 17: RESULTADO 

 
Punto de vista del CÓDIGO FUENTE  

 
<html>  

<head>  

<title> Ejercicio 17 </title> 

</head> 

<body >  

<h1>Página principal </h1>  

<a href="ejercicio1.htm">Ejercicio 1.  Estructura base</a> <br> 

<a href="ejercicio2.htm">Ejercicio 2.  Documento con metaetiquetas </a> <br> 

<a href="ejercicio3.htm">Ejercicio 3.  Documento con color de fondo </a> <br> 

<a href="ejercicio4.htm">Ejercicio 4.  Documento con imagen de fondo </a> <br> 

<a href="ejercicio5.htm">Ejercicio 5.  Documento estructurado en secciones </a> <br> 

<a href="ejercicio6.htm">Ejercicio 6.  Documento con estilos de texto</a> <br> 

<a href="ejercicio7.htm">Ejercicio 7.  Documento con una imagen  insertada y varios 

atributos</a> <br> 

<a href="ejercicio8.htm">Ejercicio 8.  Documento con listas </a> <br> 

<a href="ejercicio9.htm">Ejercicio 9.  Documento con tabla</a> <br> 

<a href="ejercicio10.htm">Ejercicio 10. Documento con galería  de imágenes</a> <br>

<a href="ejercicio11.htm">Ejercicio 11. Documento con marco interno (iframe)</a> 

<br> 

<a href="ejercicio12.htm">Ejercicio 12. Documento  con enlaces externos </a> <br> 

<a href="ejercicio13.htm">Ejercicio 13. Documento con enlaces (distintos tipos de 

protocolo)</a> <br> 

<a href="ejercicio14.htm">Ejercicio 14. Documento con enlaces (distintos tipos de 

fichero)</a> <br> 

<a href="ejercicio15.htm">Ejercicio 15. Documento con enlaces y atributos</a> <br> 

<a href="ejercicio16.htm">Ejercicio 16. Documento con enlaces internos (FAQ)</a> 

<br> 

</body>  

</html> 

 



Pedro Razquin Zazpe 

66 



Lenguaje HTML 

67 

 

 

 

 

 

 

AUTOEVALUACIÓN



Pedro Razquin Zazpe 

68 

Prueba de autoevaluación 

1. Cree una carpeta en su ordenador local llamada "prueba" y en su interior, otra 
carpeta llamada "fotos". 

2. Busque una imagen del presidente de Estado Unidos en Google y guárdela en la 
carpeta "fotos". 

3. Cree con el block de notas un documento HTML (llamado prueba1) con las 
siguientes características: 

- 1 metaetiqueta de autor con su nombre y apellidos  

-  Color de fondo amarillo  

- 1 encabezamiento H1 centrado con el texto "Prueba de autoevaluación" 

-  Inserte una lista no ordenada con 4 asignaturas del plan de estudios. Añada 
un salto de línea. 

- 1 tabla de 1 fila por 2 columnas, con ancho del 500 y un borde=1 

- Inserte en la celda 1 la foto del presidente  

- Inserte en la celda 2 un enlace con la dirección http://www.csic.es, un title 
que  ponga Bibliotecas_CSIC y el texto Consejo Superior de Investigaciones 
Científicas 

- Añada un salto de línea. e inserte, a continuación de la tabla,  un iframe de 
un ancho 500 y un alto de 600 que muestre la página de la Casa Blanca 
(http://www.whitehouse.gov/espanol) 

- Inserte un párrafo alineado a la derecha y escriba su nombre completo en 
mayúsculas y negrita 

4. Guarde el documento prueba1.htm en la carpeta prueba. 

5. Visualice el resultado a través de un programa navegador y compruebe los 
enlaces 

 

Tiempo estimado para la realización: 60 minutos 

 



Lenguaje HTML 

69 

AUTOEVALUACIÓN: RESULTADO 

 
Punto de vista del NAVEGADOR 

 



Pedro Razquin Zazpe 

70 

AUTOEVALUACIÓN: RESULTADO 

 
Punto de vista del CÓDIGO FUENTE  

  
<html> 

 <head>  

<title> Prueba 1 </title> 

<meta name="author" content="Pedro"> 

</head> 

<body bgcolor="yellow">  

<h1>Prueba de autoevaluación </h1>  

Asignaturas del plan de estudios 

<ul>  

<li>Edición digital</li>  

<li>Informática General</li>  

<li>Fuentes de Información Especializada   </li>  

<li> Organización y Gestión de Bibliotecas </li>  

</ul> <br> 

<table border=”1” width=”500” > 



Lenguaje HTML 

71 

<tr> 

<td><img src="fotos/obama.jpg"></td> 

<td><a href="http://www.csic.es" title="Bibliotecas_CSIC">  

Consejo Superior de Investigaciones Científicas</a></td> 

<tr> 

</table><br> 

<iframe src="http://www.whitehouse.gov/espanol" width="500"   

 

height="500"> </iframe> <br> 

 <p align="center"> 

<b>PEDRO R.</b> 

</p> 

</body> 



Pedro Razquin Zazpe 

72 

 

 

 



Lenguaje HTML 

73 

 
 

 

 

 

 

 

 

ANEXOS 



Pedro Razquin Zazpe 

74 

ANEXO 1 

ATRIBUTOS 

Las etiquetas pueden incluir atributos o modificadores que varían su comportamiento normal. 

Suelen ser en su mayoría opcionales y se pueden entender como propiedades concretas de esa 

etiqueta. 

UBICACIÓN: Los atributos se incluyen dentro de la etiqueta de inicio 

Esquema 

<ETIQUETA ATRIBUTO>......</ETIQUETA> 

Ejemplo 

<body bgcolor=”green”>…. </body> 

 

SINTAXIS DEL ATRIBUTO: Se escribe el nombre del atributo, un signo igual y el valor 

del atributo entre comillas  (si es una sola palabra o número se puede prescindir de las 

comillas). 

Esquema 

 

<ETIQUETA ATRIBUTO="Valor"> ....</ETIQUETA> 

 

Ejemplo 

<body bgcolor=”green”>…. </body> 

 

Explicación del ejemplo: A la etiqueta body (cuerpo) le añadimos el atributo "bgcolor” (color 

de fondo) para especificar el color de la página, en este caso “green” (verde) usando la 

denominación RGB. (En caso de no especificarse un color de fondo, el color por defecto de 

las páginas es blanco). 



Lenguaje HTML 

75 

NÚMERO DE ATRIBUTOS: Se pueden incluir uno o varios atributos en la misma etiqueta. 

Si son varios se separan por espacios en blanco. 

Esquema 

<ETIQUETA Atributo1 Atributo2 Atributo3>.....</ETIQUETA> 

Ejemplo: 

<img src=”mifoto.jpg” width=”200” heigth=”150”> 

Explicación del ejemplo: A la etiqueta img (imagen) le añadimos el atributo "src” (origen o 

fuente) para especificar el nombre y la ubicación de la imagen, en este caso “mifoto.jpg”, el 

atributo width (ancho) y heigth (alto) para especificar sus dimensiones de visualización. (En 

caso de no especificarse el ancho y el alto, la imagen tendrá sus dimensiones originales). 

 

ORDEN DE LOS ATRIBUTOS: El orden en el que se incluyan los atributos será 

indiferente. 

Esquema 

<ETIQUETA Atributo3 Atributo1 Atributo2> ....</ETIQUETA> 

<ETIQUETA Atributo1 Atributo2 Atributo3>.....</ETIQUETA> 

Ejemplo: 

<img src=”mifoto.jpg” width=”200” heigth=”150”> 

<img width=”200” heigth=”150 src=”mifoto.jpg””> 

ETIQUETAS Y ATRIBUTOS  

 

Cada etiqueta tiene sus propios atributos y éstos no pueden aplicarse a 

otras directivas. 



Pedro Razquin Zazpe 

76 

ANEXO 2 
 

URL (Localizador Uniforme de Recursos) 
 

URL: Dirección WEB  
El URL (Localizador Uniforme de Recursos) es un sistema de identificación  para referirse a 
cualquier objeto dentro de Internet. El objeto puede ser un documento html, un grupo de noticias, 
una canción, una imagen o cualquier otra cosa.  
URL nos indica cómo se llama y dónde se encuentra un objeto dado y nos permite, por tanto, 
localizarlo y vincularnos a él. 

URL: Absoluto y Relativo  

Hay dos tipos de URL según el grado de detalle con que se escribe la dirección con la que 
queremos enlazar  

1. Url Absoluto  
2. Url Relativo  

 

URL absoluto  

Un URL absoluto está formado por: un indicador del protocolo de acceso (como http) un código 
separador (://) y un nombre de servidor (como www.bne.es).  

 

Ejemplo URL absoluto 

http://www.bne.es/
 (Es la dirección web de la Biblioteca Nacional de España, su página principal) 

Además URL puede contener otros componentes: la ruta de directorios dentro del servidor 
(separados por /) y el nombre de una página o fichero concreto  

Ejemplo 2 URL absoluto: 
 

http://www.bne.es/es/LaBNE/FundacionAmigos/index.html 
  

(Es la dirección web de la Fundación de Amigos de la Biblioteca Nacional de España)  



Lenguaje HTML 

77 

 
URL relativo  
 
Un URL relativo es una forma abreviada de la URL que  no contiene indicación del protocolo de 
acceso y ni nombre del servidor (ni siquiera una indicación de unidad como a: o C:). Puede ser 
simplemente un nombre de fichero o una ruta de directorios y un nombre de fichero  

Usamos este el tipo de ruta abreviada para enlazar ficheros de un mismo sitio web (nuestros 
propios ficheros entre si.)  

Tomaremos como ejemplo la carpeta de la imagen y su contenido.  Esta “carpeta web” contiene 
dos ficheros: index.htm y saludo.htm y una carpeta (o subdirectorio) llamado “documentos” con 
tres documentos en su interior: vitae.htm, faq.htm y links.htm.  

A continuación examinaremos las posibilidades básicas mediante ejemplos.  
 

 



Pedro Razquin Zazpe 

78 

URL RELATIVO EJEMPLO 1  

Enlace del documento index.htm con el documento saludo.htm. 

 

  
 

Este es el caso más simple. Cuando los dos documentos se encuentran en el mismo directorio o 
carpeta, basta con usar -como URL-el nombre del fichero con el que queremos enlazar  
 

 

<A HREF="saludo.htm">Texto del enlace </A> 



Lenguaje HTML 

79 

URL RELATIVO EJEMPLO 2 

Enlace del documento index.htm con el documento vitae.htm 

 

 

En este caso, el documento con el que queremos enlazar se encuentra en carpeta o subdirectorio 

inferior. La ruta incluye el nombre de la carpeta y, separado por la barra inclinada, el nombre 

del fichero.  

 

<A HREF="documentos/vitae.htm">Texto del enlace </A> 

 

En otros casos, más complejos, puede suceder que el documento se encuentre en una carpeta 

dentro de otra carpeta (es decir, 2 niveles por debajo).  

Entonces la ruta sería del tipo "documentos/personales/nomina.htm"  



Pedro Razquin Zazpe 

80 

URL RELATIVO EJEMPLO 3 

Enlace del documento faq.htm con el documento index.htm 

 
 

En este caso, el fichero con el que se quiere enlazar se encuentra en un nivel superior. Se usa la 
expresión ../ (para indicar subir 1 nivel) y luego el nombre del fichero.  

 
<A HREF="../index.htm">Texto del enlace </A> 

 
En casos complejos, es decir con más niveles, se puede usar esta expresión repetida tantas veces 
como sea necesario.  
Por ejemplo: "../../index.htm"  
 
 



Lenguaje HTML 

81 

URL RELATIVO EJEMPLO 4  
 

Enlace del documento doc1.htm con el archivo foto1.jpg 

 

 

En este caso, el fichero con el que se quiere enlazar se encuentra en otra carpeta del mismo nivel. 

La ruta se traza usando una combinación de los ejemplos 2 y 3.  Se usa la expresión  ../ para subir 

1 nivel  y luego el nombre de la carpeta y el nombre del fichero. En casos más complejos, es 

decir, con más niveles, se puede usar esta expresión repetida tantas veces como sea necesario.   

 
<A HREF="../fotos/foto1.jpg">Texto del enlace </A> 

 



Pedro Razquin Zazpe 

82 

ANEXO 3 

 

Reglas y recomendaciones 

para los nombres de los archivos, de carpetas y direcciones URL 
 
 

  No usar la Ñ. (evitar nombres tales niños.htm o mañana.jpg) 
 

  No usar vocales acentuadas (evitar nombres tales bibliografía.htm o josemaría.jpg) 
 

   No usar espacios en blanco (evitar nombres como mis fotos.htm o Juan Pérez.jpg) 
 

(Si resulta necesario a efectos de identificación puede sustituirse por guión bajo, 
por ejemplo: mis_fotos.htm) 
 

   No usar mayúsculas (evitar nombre tales como Biografia.htm o PEDRO.jpg) 
 

(Esta recomendación se basa en que muchos sistemas diferencian entre mayúsculas y 
minúsculas. Para evitar problemas, se aconseja usar siempre minúsculas) 

 
   Usar nombres con un máximo de 8 caracteres (evitar nombres largos como "pagina      

de cine español.htm.") 
 

(El límite real de la longitud del nombre estaría en 56 caracteres pero muchos 
sistemas son incapaces de reconocerlos) 



Lenguaje HTML 

83 

 
ANEXO 4 

 
       ISO 8859-1 Caracteres 
 

Resultado Descripción Nombre 

À A mayúscula con acento grave. &Agrave; 

Á A mayúscula con acento agudo. &Aacute; 

 A mayúscula con circunflejo. &Acirc; 

à A mayúscula con tilde. &Atilde; 

Ä A mayúscula con diéresis. &Auml; 

Å A mayúscula con círculo encima. &Aring; 

Æ AE mayúscula. &AElig; 

Ç C mayúscula con cedilla. &Ccedil; 

È E mayúscula con acento grave. &Egrave; 

É E mayúscula con acento agudo. &Eacute; 

Ê E mayúscula con circunflejo. &Ecirc; 

Ë E mayúscula con diéresis. &Euml; 

Ì I mayúscula con acento grave. &Igrave; 

Í I mayúscula con acento agudo. &Iacute; 

Î I mayúscula con circunflejo. &Icirc; 

Ï I mayúscula con diéresis. &Iuml; 

Ð ETH mayúscula. &ETH; 

Ñ N mayúscula con tilde. &Ntilde; 

Ò O mayúscula con acento grave. &Ograve; 



Pedro Razquin Zazpe 

84 

Ó O mayúscula con acento agudo. &Oacute; 

Ô O mayúscula con circunflejo. &Ocirc; 

Õ O mayúscula con tilde. &Otilde; 

Ö O mayúscula con diéresis. &Ouml; 

Ø O mayúscula con barra inclinada. &Oslash; 

Ù U mayúscula con acento grave. &Ugrave; 

Ú U mayúscula con acento agudo. &Uacute; 

Û U mayúscula con circunflejo. &Ucirc; 

Ü U mayúscula con diéresis. &Uuml; 

Ý Y mayúscula con acento agudo. &Yacute; 

Þ Thorn mayúscula. &THORN; 

ß S aguda alemana. &szlig; 

à a minúscula con acento grave. &agrave; 

á a minúscula con acento agudo. &aacute; 

â a minúscula con circunflejo. &acirc; 

ã a minúscula con tilde. &atilde; 

ä a minúscula con diéresis. &auml; 

å a minúscula con círculo encima. &aring; 

æ ae minúscula. &aelig; 

ç c minúscula con cedilla. &ccedil; 

è e minúscula con acento grave. &egrave; 

é e minúscula con acento agudo. &eacute; 

ê e minúscula con circunflejo. &ecirc; 

ë e minúscula con diéresis. &euml; 



Lenguaje HTML 

85 

ì i minúscula con acento grave. &igrave; 

í i minúscula con acento agudo. &iacute; 

î i minúscula con circunflejo. &icirc; 

ï i minúscula con diéresis. &iuml; 

ð eth minúscula. &eth; 

ñ n minúscula con tilde. &ntilde; 

ò o minúscula con acento grave. &ograve; 

ó o minúscula con acento agudo. &oacute; 

ô o minúscula con circunflejo. &ocirc; 

õ o minúscula con tilde. &otilde; 

ö o minúscula con diéresis. &ouml; 

ø o minúscula con barra inclinada. &oslash; 

ù u minúscula con acento grave. &ugrave; 

ú u minúscula con acento agudo. &uacute; 

û u minúscula con circunflejo. &ucirc; 

ü u minúscula con diéresis. &uuml; 

ý y minúscula con acento agudo. &yacute; 

þ thorn minúscula. &thorn; 

ÿ y minúscula con diéresis. &yuml; 

 

 



Pedro Razquin Zazpe 

86 

      ISO 8859-1 Símbolos 

Resultado Descripción Nombre 

  Espacio de "no ruptura". &nbsp; 

¡ Signo de exclamación abierta. &iexcl; 

¢ Signo de centavo. &cent; 

£ Signo de libra esterlina. &pound; 

¤ Signo monetario. &curren; 

¥ Signo del yen. &yen; 

¦ Barra vertical partida. &brvbar; 

§ Signo de sección. &sect; 

¨ Diéresis. &uml; 

© Signo de derecho de copia. &copy; 

ª Indicador ordinal femenino. &ordf; 

« Signo de comillas francesas de apertura. &laquo; 

¬ Signo de negación. &not; 

 Guión separador de sílabas. &shy; 

® Signo de marca registrada. &reg; 

¯ Macrón. &macr; 

° Signo de grado. &deg; 

± Signo de más-menos. &plusmn; 

² Superíndice dos. &sup2; 

³ Superíndice tres. &sup3; 

´ Acento agudo. &acute; 



Lenguaje HTML 

87 

µ Signo de micro. &micro; 

¶ Signo de calderón. &para; 

· Punto centrado. &middot; 

¸ Cedilla. &cedil; 

¹ Superíndice 1. &sup1; 

º Indicador ordinal masculino. &ordm; 

» Signo de comillas francesas de cierre. &raquo; 

¼ Fracción vulgar de un cuarto. &frac14; 

½ Fracción vulgar de un medio. &frac12; 

¾ Fracción vulgar de tres cuartos. &frac34; 

¿ Signo de interrogación abierta. &iquest; 

× Signo de multiplicación. &times; 

÷ Signo de división. &divide; 



Pedro Razquin Zazpe 

88 

     Otros caracteres especiales  

Resultado Descripción Nombre 

Œ OE Mayúscula. &OElig; 

œ oe minúscula. &oelig; 

Ÿ Y mayúscula con diéresis. &Yuml; 

ˆ Acento circunflejo. &circ; 

˜ Tilde. &tilde; 

– Guión corto. &ndash; 

— Guión largo. &mdash; 

‘ Comilla simple izquierda. &lsquo; 

’ Comilla simple derecha. &rsquo; 

‚ Comilla simple inferior. &sbquo; 

“ Comillas doble izquierda. &ldquo; 

” Comillas doble derecha. &rdquo; 

„ Comillas doble inferior. &bdquo; 

† Daga. &dagger; 

‡ Daga doble. &Dagger; 

… Elipsis horizontal. &hellip; 

‰ Signo de por mil. &permil; 

‹ Signo izquierdo de una cita. &lsaquo; 

› Signo derecho de una cita. &rsaquo; 

€ Euro. &euro; 

™ Marca registrada. &trade; 



Lenguaje HTML 

89