UNIDAD 2

Hipertexto. Formatos de
visualización y elementos
de una página web.
Proyecto financiado por el Ministerio de Educación y Formación Profesional -
U.E. Next Generation

Dirección de proyecto UGT España:

Fernando Montalvo Martín

Coordinación de proyecto UGT España:

Manuela Jiménez Luna

Diseño y adaptación pedagógica UGT España:

Érika Cruz Torres
Miriam Escribano Cotera

2
Revisión de contenidos UGT España:
Érika Cruz Torres
Miriam Escribano Cotera
Javier Vaquero Andaluz
Carlos Sayalero Caballero

Coordinación APDI Group:

María del Mar Muñoz Navarro
Juan Antonio Rosado Fuentes

Autoría contenidos APDI Group:

Sonia Lozano Tomás

Diseño gráfico y producción audiovisual APDI Group:

Irene Marín Sánchez
Esther Palma Martín
Jorge Manuel Marín Beltrán

3
Índice
Introducción. 5

Objetivo. 6

La evolución de las páginas web. 7

Elementos de las paginas web. 11

Descanso Activo. 14

El cuerpo de una página web: formatos de visualización. 15

Juego Interactivo. 25

4
Introducción

Te damos la bienvenida a la
OBJETIVO
Unidad Didáctica 2 del
Módulo Formativo 1.
A lo largo de esta unidad, serás capaz de enumerar
herramientas de navegación y acceso a informa-
ción y búsqueda, describiendo sus características y
funcionalidades.
 OBJETIVO

En esta unidad, conocerás los elementos que

conforman las páginas web, así como sus
características y funcionalidades.

6
La evolución de las páginas web
La primera página web es una parte fundamental de la historia de Internet
Internet.
Fue creada por Tim Berners-Lee, un científico de computación británico,
en 1990 y la web se titulaba “WorldWideWeb” (www).

Para que nos hagamos una idea, las páginas web son como las otras herramientas que
los humanos han desarrollado a lo largo de la historia para compartir información y
conectarse con los demás. Los papiros egipcios y los libros impresos ya cumplían esa
función, pero con una gran diferencia:
diferencia la inclusión de los hiperenlaces.
Éstos convierten los textos en hipertexto logrando que las páginas web estén
vinculadas entre sí, de manera no lineal, formando una red y permitiendo navegar
por ellas de forma no secuencial.

Al igual que nuestros antepasados utilizaban las paredes de una cueva para plasmar
sus historias y conocimientos, las primeras páginas web eran simples y esquemáticas
y se utilizaban para transmitir información básica.
7
Con el tiempo, las páginas web evolucionaron y se volvieron más sofisticadas.
Pasaron de ser simples pinturas a ser como libros en una biblioteca, donde
podíamos encontrar información estructurada y organizada.

Se volvieron más complejas y añadieron elementos multimedia como videos

y elementos interactivos como formularios y botones, que nos permiten ser
más activos al navegar por la web.

Hoy en día, las páginas web son

grandes centros de información y
comunicación, con objetivos concretos
comunicación
como por ejemplo: el comercio
electrónico, entretenimiento,
organismos gubernamentales e
instituciones.
8
Si queremos ver cómo era hace un tiempo una página web en cuestión, organizaciones
como WAYBACK MACHINE nos ayudan a superar la “nostalgia de la red” pudiendo ver cuál
es la última copia que hay guardada en el archivo.

Existe un calendario en la parte superior de la pantalla, que eligiendo en qué fecha y año
queremos visitar la página, permite ver gráficamente las capturas a lo largo del tiempo.
La longitud de las barras del gráfico indica en qué meses se hicieron más copias.

9
16 de diciembre del 2003

03 de noviembre del 2023

10
Elementos de las páginas web
Existen cientos de páginas web. A pesar de que muchas de ellas pueden parecer muy
diferentes, todas comparten una estructura similar y unos elementos comunes.
comunes.
A continuación os mencionaremos algunos de los más utilizados:

11
Título: es el nombre que aparece como identidad principal de la web y suele describir
o estar relacionado con el contenido de la página.

Encabezado: se encuentra generalmente en la parte superior de la página y suele

contener el logotipo o el título principal de la página.

Menú de navegación: es una lista de enlaces que permite a los usuarios moverse
entre diferentes secciones de la página web. Suele encontrarse a la izquierda de la
pantalla a modo de índice.

Cuerpo de la página: es la parte principal donde se encuentra el contenido.

Aquí es donde se incluyen los textos, imágenes, videos u otros elementos visuales.

12
Buscador : Es la herramienta que sirve para buscar un documento o espacio en
concreto dentro de una página.

Menú general: Se trata de una serie de enunciados que sirven como guía de ubicación
de las diferentes secciones de una página web. Suele encontrarse en el encabezado.

13
Descanso Activo
¡Conoce cómo traducir cualquier página web al español!

14
El cuerpo de una página web: formatos de visualización

Hay diferentes formas de organizar y presentar el cuerpo de una página web para
que los usuarios puedan ver y comprender la información de manera efectiva.
Esto se conoce como formatos de visualización.
visualización

La combinación de estos elementos puede resultar de ayuda para crear una

presentación llamativa y fácil de usar.

15
Dentro del cuerpo de una página web también podemos encontrar otros
elementos. Estos son algunos de ellos:

ENLACES
Son palabras o frases destacadas en el
texto que, normalmente mediante color
azul y subrayados, al hacer clic en ellas,
ellas
llevan a los usuarios a otras páginas web
externas o a otros apartados integrados
en la misma web. Por ejemplo, cada
página web es un destino y el enlace es
la ruta que te permite explorar y acceder
a diferentes contenidos.

16
HIPERTEXTO
Es una forma de organizar y presentar
información en la web. El contenido tanto
textual como de otro tipo (imágenes,
botones, menús) contienen enlaces que
los vinculan con otras páginas webs lo
que permite a los usuarios navegar y
acceder a diferentes contenidos con tan
solo hacer clic en esos enlaces,
facilitando la navegación no lineal y la
conexión de información relacionada.

17
VIDEOS
Son archivos multimedia que se pueden
incrustar en una página web para
mostrar contenido audiovisual.
audiovisual

Puedes utilizar videos para tutoriales,

presentaciones, o cualquier tipo de
contenido que desees compartir.

18
IMÁGENES
Son elementos visuales que se pueden
agregar a una página web para
hacerla más atractiva y transmitir
información visualmente.
visualmente Por ejemplo,
puedes añadir una foto de un producto
si tienes una tienda en línea. También,
pueden funcionar como enlaces.

19
TEXTO
En una página web el texto nos aporta
información sobre el sitio que se está
visitando. Además, lo podemos encontrar
en diferentes formatos,
formatos colores, tamaños,
etc. con la intención de que nos sea
más atractivo.
N
o obstante, una
de las ventajas que
proporcionó el concepto
de género aludía a la
superación de la idea, compartida
por muchas feministas, de que la
disimetría entre hombres y mujeres,
presente en muchas sociedades
antiguas y actuales, se justificaba por
lo “natural” de los roles sexuales
tradicionalmente impuestos/
asumidos (Sanahuja, 2004: 38).
20
ELEMENTOS DE ORGANIZACIÓN:
LISTAS
Pueden aparecer como viñetas o
registros enumerados que nos permiten
presentar información de manera
organizada y secuencial.

TABLAS
Son utilizadas para mostrar datos
estructurados, como horarios de
estructurados
eventos, precios de productos o cualquier
tipo de información que necesite ser
presentada de manera ordenada.

21
FORMULARIOS
Permiten a los usuarios de las páginas
web proporcionar datos específicos como
nombre, teléfono, dirección de correo
electrónico, etc.

22
La combinación de estos elementos de visualización pueden resultar de ayuda para
crear una presentación atractiva y fácil de usar para los visitantes.

Recuerda que estos son solo algunos de los elementos más comunes que
encontrarás en una página web. Cada página puede variar en su diseño y elementos
dependiendo de su propósito y contenido.

Además, habrá páginas web que adapten automáticamente su contenido para que lo
visualices cómodamente desde diferentes dispositivos.

23
 ¡Haz clic aquí para
Juego Interactivo poner en práctica lo aprendido!
https://bit.ly/3Q5KlhB
Accede al juego haciendo clic en el monitor.
Desliza las letras en el orden correcto para contestar a los
enunciados.

25
Proyecto financiado por el Ministerio de Educación y Formación -UE- Next Generation

¡Has terminado la unidad!

Pulsa en el siguiente botón para cerrar.