COLEGIO NICOLAS ESGUERRA

AREA DE TECNOLOGIA E INFORMATICA

Grado Octavo
Programación en HTML
Guía 2

World Wide Web - WWW significado, historia y origen

La World Wide Web conocida como la Web, es un sistema de documentos de hipertexto vinculados entre sí
en Internet accesibles a través de navegadores.
La World Wide Web, generalmente conocida como la Web, es un sistema de documentos de hipertexto
vinculados accesibles por Internet. Usando un programa conocido como navegador Web se pueden ver
páginas que pueden contener textos, imágenes, medios continuos como video o música y casi cualquier
elemento multimedia de hoy en día.
Uno de los grandes aciertos del sistema fue la conexión entre las páginas a través de hipervínculos. Esto
permite hacer un recorrido no lineal entre los documentos, conocido como navegación.
La propuesta original de la Web fue redactada en la CERN (European Organization for Nuclear Research) en
el año de 1989 por Sir Timothy John Berners-Lee, tomando como idea precursora a un proyecto jamás
materializado llamado Memex. Ideado por Vannevar Bush en 1945, consistía en un dispositivo que
almacenaría documentos de todo tipo que serían consultado y editados a través de una especie de teclado
con palancas.
Marzo de 1989 es conocido como el hito que marca el nacimiento de Internet, y posiciona Berners-Lee como
padre. La propuesta formal de la Web fue presentada oficialmente en la CERN el 12 de noviembre de 1990 en
parte gracias a la colaboración de Robert Cailliau.
Como miembro de la CERN, fue quien decidió tomar la idea de Berners-Lee y ayudó tanto en la redacción
como en la provisión de recursos para concretar el proyecto. A finales de 1990 ya habían construido el primer
servidor Web en un sistema Next, y el primer software navegador-editor de páginas.
Sin embargo, no fue hasta abril de 1993 cuando la CERN decidió permitir el uso libre y gratuito de la Web a la
comunidad. La aparición del primer navegador Web MOSAIC de la NCSA (National Center for Supercomputer
Applications) marcó el comienzo oficial de la Web como un sistema orientado a la comunidad.
Hipertexto
El lenguaje de marcas de hipertexto, HTML o (HyperText Markup Language) se basa en el metalenguaje
SGML (Standard Generalized Markup Language) y es el formato de los documentos de la World Wide Web. El
World Wide Web Consortium (W3C) es la organización que desarrolla los estándares para normalizar el
desarrollo y la expansión de la Web; además la que publica las especificaciones relativas al lenguaje HTML.
HTML fue concebido como un lenguaje para el intercambio de documentos científicos y técnicos adaptado
para su uso por no especialistas en tratamiento de documentos. HTML resolvió el problema de la complejidad
de SGML sirviéndose de un reducido conjunto de etiquetas estructurales y semánticas apropiadas para la
realización de documentos relativamente simples. Pero, además de simplificar la estructura de los
documentos, HTMLhtml soportaba el hipertexto.
Los documentos HTML son archivos de texto plano (también conocidos como ASCII) que pueden ser creados
mediante cualquier editor de texto, aunque también existen programas específicos para editar HTML (los
editores más conocidos son Microsoft FrontPage, Netscape Composer, Macromedia Dreamweaver y Adobe
PageMill), concebidos específicamente para editar páginas web en HTML.
HTML no permite definir de forma estricta la apariencia de una página, aunque en la práctica, se utiliza
también como un lenguaje de presentación. Los archivos de HTML se leen en un navegador web tal como
Google chrome, Microsoft Explorer, Mozilla, etc. La presentación de la página es muy dependiente del
navegador o browser utilizado ya que el mismo documento no produce el mismo resultado en la pantalla si se
visualiza con uno u otro, o sea, HTML se limita a describir la estructura y el contenido de un documento, y no
el formato de la página y su apariencia.
Hipervínculo
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o
archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse
entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará
cuando el usuario haga clic en el enlace.
El atributo href nombra la conexión hacia otra página web. En realidad, es el lugar donde será dirigido el
usuario cuando haga clic en el enlace o link HTML.
Los links pueden ser:

 Enlaces internos - hacia lugares específicos desde la página(anclas)

 Enlaces locales - hacia otras páginas desde el mismo dominio
 Enlaces globales - hacia otros dominios, fuera de la página web
Por ejemplo, para insertar el enlace:
Visita www.colegionicolasesguerra.edu.co
Habría que escribir:
<a href="http://www.colegionicolasesguerra.edu.co ">Visita www.colegionicolasesguerra.edu.co </a>
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto
de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos
dentro de una misma carpeta, conocida como carpeta raíz del sitio.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta
raíz del sitio, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
Habría que escribir:
<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la
carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada
tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir:
<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del
directorio en el que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el
documento actual, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
Habría que escribir:
<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa que en este caso no aparece el símbolo "/" delante del nombre del documento. Si el documento
t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la
misma carpeta que el documento actual, habría que escribir:
<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Punto de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo
debe ser "nombre_de_documento#nombre_de_punto".
Por ejemplo, para insertar el enlace:
Punto de fijación Tipos de enlaces
Habría que escribir:
<a href="t_4_1.htm#tipos">Punto de fijación Tipos de enlaces</a>
Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos.
Al final de este tema verás cómo definir el punto de fijación.
El destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del
atributo target al que se le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos
padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
Visita www.colegionicolasesguerra.edu.co en una ventana nueva
Habría que escribir:
<a href="http:// www.colegionicolasesguerra.edu.co " target ="_blank">Visita
www.colegionicolasesguerra.edu.co en una ventana nueva</a>
Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el
usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había
salido (que vuelva a nuestro sitio).
Formato de los enlaces
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del
vínculo. Suele adquirir la apariencia de una mano señalando.
Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero
del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros podemos
cambiar esos colores.
Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta
<body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink (vínculo
visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Por ejemplo, al insertar el siguiente código:
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.colegionicolasesguerra.edu.co " target ="_blank">www.colegionicolasesguerra.edu.co
</a>
...
Mientras no se visite la página www.colegionicolasesguerra.edu.co, el enlace será de color rojo (#FF0000):
www.colegionicolasesguerra.edu.co
Mientras la página www.colegionicolasesguerra.edu.co sea la última visitada, el enlace será de color fucsia
(#FF0099):
www.colegionicolasesguerra.edu.co
Cuando se haya visitado la página www.colegionicolasesguerra.edu.co, el enlace será de color naranja
(#FF9900):
www.colegionicolasesguerra.edu.co
Ejercicio en clase
1. Resuelva las siguientes sopas de letras en el cuaderno y escriba el significado o la explicación de
cada una de las palabras.
 worldwideweb
documentos
hipertexto
Internet
navegador
hipervínculos
cern
Memex
servidorWeb
software
Webmosaic
metalenguaje
href
atributo
html
browser
ascii
sgml
link

2. Explique la diferencia que existe entre los hipervínculos de los siguientes tipos: referencia relativa al
sitio, referencia relativa al documento y punto de fijación
3. Explique cuales son los tipos de formatos que existen en lenguaje HTML, y que ocurre en cada uno.
Ejercicio 3: Insertar hipervínculos
Para iniciar vamos a escribir el código base en un bloc de notas:

Vamos a agregar una línea con nuestro hiper enlace.

Guardamos nuestro archivo como .txt y como .html para ver el resultado, al hacer clic en el enlace debe
abrirnos otra ventana con la web del colegio.
Ejercicio 3: Insertar hipervínculos con identificación de colores
A nuestro ejercicio anterior vamos a agregar las siguientes líneas

Por último revisa la web y para terminar realiza la actividad propuesta en

https://studio.code.org/s/minecraft/stage/1/puzzle/1 cierra el video y sigue las instrucciones.