COLEGIO INMACULADO CORAZON DE MARIA

MISIONERAS CLARETIANAS
Bogotá D.C.

ÁREA DE ÉNFASIS

ÁREA DE ÉNFASIS EN INFORMÁTICA GRADO

MODULO DE TRABAJO Nº 1
PRIMER PERIODO - Febrero 1 a Abril 10 8°

ESTUDIANTE: _________________________________ CÓDIGO: ____ CURSO: _____

DOCENTE: ANDRES DIAZ PORRAS

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
1
 COMPETENCIAS INSTITUCIONALES GRADO OCTAVO

NIVELES DE DESEMPEÑO DE LAS COMPETENCIAS

COMPETENCIAS COGNITIVO METACOGNITIVO

INTERPRETATIVO ARGUMENTATIVO PROPOSITIVO METACRÍTICO

CELEBRATIVA - MISIONERA Reconoce en la tecnología e Comprende y expresa los motivos Ayuda a los integrantes de la Demuestra sentimientos
Entender como la tecnología e informática una herramienta por los que un elemento, una comunidad a crear ambientes de alergia, solidaridad y
informática puesta al servicio de para el desarrollo de su vida y acción, una persona o una más ricos de trabajo con el respeto y analiza con
los demás se vivencia en los la de los demás respetando situación benefician o perjudican uso de la TICS. sentido crítico la
valores claretianos, formando los deberes y derechos los principios humano cristiano utilización de la
personas comprometidas con el claretianos. claretianos tecnología dentro de la
entorno y con sigo mismo. comunidad.
COMUNICATIVA Reconoce la necesidad de Explica las repercusiones del Lidera y formula conjeturas a Analiza los procesos y
Usar los lenguajes de mantenerse en continua lenguaje de programación en el través de formas creativas operaciones realizadas y
programación para interactuar con comunicación por medio de mundo actual e infiere los posibles utilizando lenguaje es capaz de reconocer
el computador, enviar y recibir los artefactos tecnológicos y efectos e impacto como medio de informático. las fallas que presente y
información, crear interfaces para interactuar con los comunicación con el computador. solucionarlas en las
gráficas y comunicarlas con bases demás en la comprensión de operaciones de sistemas
de datos. la simbología y terminología tecnológicos
de la tecnología e informática.
ECOLÓGICO - AMBIENTAL Identifica los problemas Comprende y explica los motivos Propone alternativas de Inspeccionar sobre sus
Comprender los problemas éticos, éticos, culturales y por los cuales se debe o no se solución creativamente, a acciones y puede corregir
culturales y ambientales ambientales relacionados con debe realizar una acción, problemas éticos, culturales y o establecer sus aciertos
relacionados con la tecnología. la tecnología. involucrarse o involucrar a otras ambientales relacionados con frente a problemas
personas en situaciones no la tecnología. éticos, culturales y
adecuadas desde el punto de vista ambientales relacionados
ético y ambiental en temas con la tecnología.
relacionados con la tecnología
CIENTÍFICO – TECNOLÓGICA Comprende que la tecnología Explica los procesos, operaciones, Propone soluciones a partir Revisa procesos,
Usar la tecnología para localizar, e informática contribuyen en el y demás procedimientos del análisis de situaciones autoanaliza
recoger y evaluar información de desarrollo adecuado del ser involucrados en la localización, para el buen uso de la procedimientos, para
una variedad de fuentes y para humano. recolección y evaluación de tecnología. determinar mejores
construir aplicaciones que suplan información. soluciones o corregir sus
las necesidades del medio. posibles errores en la
localización, recolección
y evaluación de
información.
CRÍTICO – CREATIVA Elige entre diferentes diseños Analiza, discierne, expone, y Articula soluciones como Discierne sobre sus
Sustentar argumentar y verificar experimentales o realiza propuestas innovadoras y / resultado del análisis de una propuestas y puede
resultados de un proceso y planteamientos teóricos los o críticas frente a procesos situación problémica entender las falencias y
explorar nuevos caminos que más adecuados para abordar tecnológicos. enfocada hacia el diseño de aciertos de las mismas y
contribuyan al mejoramiento de una situación específica en el proyectos, animaciones y presentar posibles
estrategias utilizadas. contexto científico o sitios web. soluciones para corregir
tecnológico. los errores presentados.
SOCIO – HISTÓRICA Comprende, interpreta y Comprende y explica cómo se ha Construye propuestas de Entiende el papel que
Entender como la tecnología e apropia conceptos históricos suscitado el avance tecnológico, trabajo con acciones juega el proceso
informática a través de la historia relacionados con la entiende que son los derechos de dinámicas para las histórico, comprendiendo
ha evolucionado, contextualizando tecnología. autor, las marcas y es capaz de situaciones cambiantes de su como con su actitud y el
situaciones que se han suscitado discernir el papel que estos entorno. manejo de la tecnología
como consecuencia de los elementos juegan en la sociedad puede modificar el futuro
avances tecnológicos. de hoy y del futuro. mismo de la sociedad.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
2
 NIVELES E INDICADORES DE DESEMPEÑO DE LAS COMPETENCIAS

CONCEPTOS Y COMPETENCIAS Proceso Cognitivo: Saber y Saber Hacer Proceso

Período

CONTENIDOS BÁSICOS Metacognitivo:

Saber Ser

Interpretativo Argumentativo Propositivo Metacritico

RECONOCER LAS Reconoce los Aplica los Construye Asume una visión
ETIQUETAS DEL diferentes conceptos y los páginas web crítica frente a la
CONSTRUCCIÓN DE LENGUAJE HTML Y lenguajes de códigos necesarios utilizando utilización de la
PAGINAS WEB CON HTML programación web para creación de herramientas ciencia y a la
LA ESTRUCTURA
y su aplicación, así páginas como fondos, tecnología.
BÁSICA NECESARIA como la interactivas colores, tipos de
• Introducción al diseño
PARA PODER implementación de mediante el uso de fuentes, tipos de
• Reglas de color para
diseño web DISEÑAR, etiquetas básicas las TICS tamaños,
Primero

• Programación web CONSTRUIR Y del lenguaje HTML vínculos e

• HTML (conceptos VISUALIZAR para realizar una imágenes.
generales) PAGINAS WEB EN UN página Web,
• Estructura básica HTML implementando el
NAVEGADOR.
uso de gráficas,
• Uso de gráficas,
imágenes y
imágenes y vínculos
vínculos teniendo
en cuenta
psicología del
color.

RECURSOS:

1. Bibliografía Libros de Referencia y Textos:

• Montaño, J. F. A. (2020). INFORMATICA EN EL AULA 9. Prentice Hall.

• Heller, E. (2004). Psicología del color: Cómo Actúan Los Colores Sobre Los Sentimientos
Y La Razón (0 ed.). Editorial Gustavo Gili.

2. Bibliografía Interactiva:
• Introducción al diseño web. (s. f.). [Link]. Recuperado 17 de octubre de
2020, de [Link]

• E. (2018, 16 julio). La teoría del color | estudio de arte collado mediano. escuela de arte
collado mediano. [Link]

• Cañuelo, L. (2019, 17 octubre). Los 7 conceptos básicos que debes saber de HTML.
Leonor Cañuelo – Diseñadora web freelance, especializada en Wordpress.
[Link]

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
3
 CONTENIDOS BÁSICOS
DISEÑO WEB

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios
web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere
tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de
la información y la interacción de medios como el audio, texto, imagen y vídeo. Se lo considera
dentro del diseño multimedial.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia
de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el
contacto directo entre el productor y el consumidor de contenidos, característica destacable del
medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente
en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica
en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus
producciones y utilizarlas como un canal más de difusión de su obra.

DISEÑO WEB APLICADO

El diseño de páginas web trata básicamente de realizar un documento con información
hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos
de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).

Estos documentos o páginas web pueden ser creadas:

➔ Creando archivos de texto en HTML.

➔ Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
4
 ➔ Utilizando lenguajes de programación del lado servidor para generar la página web.

ETAPAS

Para el diseño de páginas web debemos tener en cuenta tres etapas:

➔ La primera es el diseño visual de la información que se desea editar. En esta etapa se

trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos
multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el
computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará tener un
orden claro sobre el diseño.

➔ La segunda, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto,
y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de
marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este
documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre
ellos conducen a otras páginas con información relacionada.

➔ La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en

optimizar la estructura del contenido para mejorar la posición en que aparece la página en
determinada búsqueda.

El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma
de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de
textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm).
Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta
era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores
visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es
necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en
lo más importante, el diseño del documento.

ACTIVIDAD 1.

1. Leer Conceptos Básicos y realizar un resumen en el cuaderno.

2. Investigar en que consiste el marketing digital.
3. Investigar la psicologia del color.

HTML
HTML (Hyper Text Markup Language) es un lenguaje que se utiliza para la creación de páginas
Web. Es muy fácil de usar y está basado en lo que se llaman etiquetas (o tags, en inglés), las
etiquetas definen la forma del documento HTML.
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
5
Las páginas WEB revolucionaron el mundo Internet; ahora es más sencillo acceder a bases de
datos, a bibliotecas y a lugares remotos. También es posible visualizar, mediante una
presentación multimedial, en la mayoría de los casos, la imagen de una institución educativa o
comercial.

Gracias a Internet y a los navegadores del tipo Explorer, Mozilla, Firefox o Netscape, el HTML se
ha convertido en uno de los formatos más populares que existen para la construcción de
documentos. HTML no define la página como lo hacen algunos lenguajes de programación,
definiendo cada elemento gráfico y su posición en la página. Esto incluye las fuentes, el tamaño
de la letra, los colores de pantalla, el grosor de las líneas, el texto y los elementos gráficos,
tampoco su colocación exacta; solo etiqueta el contenido de un archivo con ciertos atributos, que
después interpreta el visualizador utilizado para leerlo. Es como una persona que escribe a mano
un memorando y coloca breves comentarios en algunas secciones para indicarle a quien lo lea
como realizar actividades específicas.
Las etiquetas HTML determinan atributos tipográficos; insertan archivos de gráficas, sonidos y
video en el texto, y crean vínculos de hipertexto y formularios. El hipertexto es la capacidad más
importante del lenguaje HTML; significa que cualquier parte del texto o de la gráfica puede
vincularse con otro documento HTML.

REQUISITOS BÁSICOS PARA GENERAR UNA PAGINA WEB

Para escribir una página WEB se requieren algunos recursos, según lo que desee hacerse; ellos
son:

SOFWARE HARDWARE
• Procesador de texto, porque los • Computador que pueda ejecutar un
archivos de HTML son de esta índole. procesador de texto y un visualizador.
• Visualizador para interpretar las Aunque si quieren hacerse páginas con
marcas HTML y dar formato en la sonido, con animaciones y con video, el
pantalla. equipo debe estar acondicionado con
• Graficadores para editar y crear tarjeta de sonido y tarjeta de video.
archivos gráficos. • MODEM para ejecutar las páginas que
• Editores de sonido para crear y editar interactúan en la WEB.
archivos de sonido.

FUNDAMENTOS DE PROGRAMACIÓN EN HTML

Los documentos HTML constan de dos partes:

El encabezado y el cuerpo. Ambos utilizan elementos de código llamados etiquetas, que dan
formato al texto, vinculan archivos, insertan gráficas y tablas y crear formularios para ingresar
información.
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
6
La forma estándar de escribir las etiquetas es en mayúsculas. Sin embargo, la mayor parte de
los visualizadores funcionan con etiquetas escritas en mayúsculas, en minúsculas y con una
combinación de ambas.
La mayor parte de las etiquetas en HTML deben ser escritas en parejas, una de inicio y otra de
cierre, así:

<ETIQUETA> texto afectado por la instrucción. </ETIQUETA>

La etiqueta de cierre se reconoce por la diagonal (/) antes del nombre de la etiqueta.

Un archivo de HTML siempre empezara con la etiqueta <HTML>, que debe escribirse en la parte
superior del archivo. Esta etiqueta le indica a cualquier visualizador WEB que intente leer el
archivo que está enfrentado con un archivo que contiene código HTML. Así mismo, la última línea
del documento siempre será la etiqueta </HTML>, que puede considerarse el fin de la página
HTML.

Las siguientes etiquetas sirven para dividir el documento en dos secciones:

encabezado y cuerpo.

El encabezado: es una introducción a la página y para definirlo solo se requieren las

etiquetas <HEAD> y </HEAD> debajo de la etiqueta <HTML>.

El cuerpo: es donde se inserta el texto, las gráficas y los vínculos que aparecerán en
la página WEB, y para definirlo se colocan las etiquetas <BODY> y </BODY>
después de la sección encabezado (abajo de la etiqueta </HEAD>), como se
muestra a continuación:

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>

El título es el nombre general de la página. Al observase la página con un visualizador, el titulo

aparecerá en la barra de título del visualizador.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
7
 ETIQUETAS BÁSICAS

• <HTML>: Es la etiqueta que define el inicio del documento HTML, le indica al navegador
que todo lo que viene a continuación debe tratarlo como una serie de códigos HTML.

• <HEAD>: Define la cabecera del documento HTML, esta cabecera suele contener
información sobre el documento que no se muestra directamente en el navegador. Como
por ejemplo el título de la ventana de su navegador. Dentro de la cabecera

• <HEAD>: podemos encontrar: <TITLE>: Define el título de la página. Por lo general, el título
aparece en la barra de título encima de la ventana.

• <LINK>: para definir algunas características avanzadas, como por ejemplo las hojas de
estilo (CSS) usadas para el diseño de la página, ejemplo : <link rel="stylesheet" href="/[Link]"
type="text/css">

• <BODY>: Define el contenido principal o cuerpo del documento, esta es la parte del
documento Html que se muestra en el navegador, dentro de esta etiqueta pueden definirse
propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del
cuerpo <BODY> podemos encontrar numerosísimas etiquetas. A continuación, se indican
algunas a modo de ejemplo:

o <H1>, <H2>,... <H6>: Encabezados o títulos del documento en diferentes tamaños de

fuente.
o <P>: Parrafo nuevo.
o <marquee>: En esta etiqueta tendremos un texto en movimiento que va de derecha
a izquierda de la pantalla.
o <BR>: salto de línea forzado.
o <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las celdas dentro
de las filas con <TD>
o <A>: Indica la existencia de un hipervínculo o enlace, dentro o fuera la página Web.
Debe definirse el parámetro de pasada por medio del atributo href ejemplo:
<a href="[Link]">Google</a> se representa como Google
o <DIV>: comienzo de un área especial en la página
o <IMG>: indica la existencia de una imagen para mostrarse en el navegador

NOTA: Es importante tener en cuenta que se debe cerrar cada una de las etiquetas que se abrió,
pero adicionándole un “/”, de la siguiente manera:
<script> … </script>

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
8
 ACTIVIDAD 2.

Crear una página web con las siguientes características (en el cuaderno):
Título: Nombre del estudiante
Título de la página: Mi Primera Pagina
Escribir un resumen sobre el Diseño Web en mínimo 2 párrafos.

CREANDO UNA PÁGINA

Lo primero que se debe hacer es crear un directorio o carpeta para dejar todos los archivos e
imagenes que vamos a utilizar en la página Web.

Pasos para crear una página:

✔ Abra su editor de texto (notepad, kwrite).
✔ Generar el código fuente.
✔ Guarde la página en su directorio de página Web. Recordar que la extensión de del
archivo debe ser .html (ejemplo [Link])

Digitar el siguiente código y seguir los pasos anteriores para generar la primera página web
En este ejercicio vamos a darle el nombre de: [Link]

<HTML>
<HEAD>
<TITLE>
ESTUDIANTE
</TITLE>
<BODY><CENTER>DISEÑO WEB</CENTER>
… Aqui van los parrafos...
</BODY>
</HEAD>
</HTML>

Ahora ya solo queda ver como ha quedado la página. Si usas Firefox (linux) en el directorio donde
guardaste tu primera página Web, luego has doble clic sobre el documento [Link] que
creaste. Luego se abrirá tu navegador y mostrará tu página.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
9
 ACTIVIDAD 3.
1. Investigar las siguientes etiquetas del manejo de texto. Copiarlas en el
cuaderno.
• Titulos (H1, H2, H3...)
• Estilos, Tamaño, Tipos y Color de Fuentes
• Parrafos y Bloques

2. Etiqueta para insertarle color al cuerpo de las paginas

3. Tabla de colores para utilizar en el diseño de páginas web.

MANEJO DE GRÁFICOS
Los visualizadores pueden desplegar imágenes gráficas junto con el texto, para que los
documentos se vean mejor y comuniquen información que sería muy difícil transmitir con
palabras.

Las gráficas se insertan con la etiqueta <IMG SRC = “nombre de archivo gráfico”> ejemplo
<IMG SRC = “[Link]”)>. Debemos recordar que las imagenes que se insertan en una página
web debe estar dentro del directorio donde se encuentra la imagen.
Ejemplo: <IMG SRC = C:\Imagenes” [Link]” >

No todos los visualizadores leen todos los formatos de archivo. Por eso se recomienda usar el
formato .GIF para guardar los archivos gráficos por cuanto pueden leerlo la mayor parte de los
visualizadores gráficos.

En el diseño de páginas WEB, uno de los problemas es el tiempo que tardan en cargarse las
imágenes. Una forma de reducir el tiempo de recuperación es incluyendo las dimensiones Width
(ancho) y High (alto), como parte de la etiqueta <IMG>. Las dimensiones Width y High, que se
miden en píxeles, le indican al visualizador el tamaño de la imagen, sin necesidad de copiar todo
el archivo gráfico. Conociendo las dimensiones, el visualizador bloquea el espacio requerido,
establece el formato del documento, presenta el texto y carga la gráfica.

Ejemplo: <IMG SRC = C:\Imagenes\” [Link]” width="28" height="21">

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
10
 ACTIVIDAD 4.

Diseñar una página web con las siguientes características:

• Título de la Pagina: La naturaleza

• Título: Animales Salvajes centrado y en mayúscula
• Color del Fondo: Verde claro
• Definir los plumiferos e insertarle imágenes alineadas a la derecha e
izquierda.
• El texto debe ir alineado al contrario de la imagen
• La imagen debe tener bordes.
• Cambiar el tamaño de la imagen (alto y ancho)

LISTAS
Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con
viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen
emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las
posibilidades que tenemos.

He aquí el ejemplo más sencillo de una de estas listas:

ESCRIBIMOS EN HTML SE VERÁ COMO:

<ul> • Primer término de la lista
<li>Primer término de la lista • Segundo término
<li>Segundo término • Tercer término

<li>Tercer término
</ul>

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>.
También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square
(círculo, disco o cuadrado) y añadir sublistas.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
11
 ESCRIBIMOS EN HTML SE VERÁ COMO
<ul>
<li type= disc>Primer término de la lista • Primer término de la lista
<ul> • Sublista
<li>Sublista ◦ Otro elemento
<li>Otro elemento • Segundo término
</ul> • Tercer término
<li type=circle>Segundo término
<li type=square>Tercer término
</ul>

LISTAS CON VIÑETAS ORDENADAS

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus
elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo
TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

ESCRIBIMOS EN HTML SE VERÁ COMO

<ol type=i> i. Primer término de la lista
<li >Primer término de la lista ii. Segundo término
<li >Segundo término iii. Tercer término
<li>Tercer término iv. Cuarto
<li>Cuarto v. Quinto
<li>Quinto
</ol>

ACTIVIDAD 5.

Basados en la página creada en la actividad No. 4 vamos a insertarle listas:

• Animales acuáticos
• Animales terrestres
• Animales carroñeros
• Aminales carnívoros
• Animales Herbívoros.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
12
 VÍNCULOS

En una página WEB pueden colocarse uno o más vínculos para hacer contacto con otra página,
con una gráfica, con un sonido, con un video, con un lugar, con un servidor de correo, con un
buzón electrónico y con cada uno de los servicios que ofrece Internet a través de la página WEB.

El texto vinculado permite que al hacer clic en una palabra, frase o imagen, pueda irse a otro
archivo o alguna parte de la página. Esta cualidad se conoce con el nombre de hipertexto. El
texto vinculado aparece en otro color y subrayado, de acuerdo con las especificaciones de
preferencias del visualizador.

Las etiquetas de HTML que se encargan de crear vínculos son <A> y </A>. la etiqueta <A> es un
poco diferente de las demás: no se utiliza sola, hay que insertarle el URL con el que se desea
vincular.

<A HREF = “URL”>.

HREF: Hypertext Referente (referencia de Hipertexto).

ENLACE A OTRO LUGAR DEL MISMO DOCUMENTO

En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser
texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que
queremos saltar:

<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="inicio"> </A>
Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador

ENLACE A OTRA PÁGINA LOCAL

En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por
ejemplo, si tenemos dos páginas en el mismo directorio [Link] y [Link] y
queremos poner un enlace desde la [Link] a la [Link] debemos escribir

<a href="[Link]">Ir a pagina2</a>

Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio
concreto de la [Link]. En ese caso tendrías que poner en el sitio adonde quieres llegar
de la [Link]

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
13
<a name="sitio"></a>
y en la [Link]
<a href="[Link]#sitio>Ir a sitio de la página 2</a>

ENLACE A UNA DIRECCIÓN DE INTERNET

Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del
navegador, es decir:

<A HREF="[Link] Cistierna</A>

ACTIVIDAD 6.

Diseñe una página web en donde se organice en forma de viñetas una lista
de los personajes más famosos de la historia del siglo XIX al XXI. A cada uno
de estos personajes tendrá que crearle un vínculo y su respectiva página con
su respectiva biografía.

ACTIVIDAD 7.

Diseñe una página web en donde se incluya todo lo visto hasta ahora sobre
los 10 mejores inventos para el futuro tecnológico.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
14