La Web y los LMS

Concepto
de
Hipertexto
y
HTML

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Hipertexto

Se denomina hipertexto a un texto compuesto

de diversos trozos enlazados, a través de los
cuales los lectores pueden navegar libremente
(en forma no lineal).

El concepto de hipertexto (e hipermedia) se le

atribuye a Ted H. Nelson, 1965.

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Hipertexto

En el hipertexto los contenidos se organizan en

forma de un grafo dirigido donde cada nodo
representa un contenido más bien específico y
cada arco representa el vínculo del contenido
de un nodo en particular con otro nodos.

Los nodos no necesariamente deben ser de

autoría de la persona que organiza el
hipertexto y solo basta que estén disponibles a
través del medio de enlace (generalmente la
Internet).

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Hipertexto

nodos

Diana Ospina. U de Antioquia

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

HTML

HyperText Markup Language

(Lenguaje de Marcas de Hipertexto)

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

HTML
“El HTML, acrónimo inglés de Hyper Text Markup Language
(lenguaje de marcación de hipertexto), es un lenguaje
informático diseñado para estructurar textos y presentarlos en
forma de hipertexto, que es el formato estándar de las páginas
web”.

• El concepto de Hipertexto (Conocido también como link o

ancla) el cual permite conectar dos elementos entre si, y
• el SGML (Lenguaje Estándar de Marcación General) el cual
sirve para colocar etiquetas o marcas en un texto que
indique como debe verse.

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Aspectos Relevantes del HTML

• HTML no es propiamente un lenguaje de programación.
• HTML no requiere ningún compilador (por lo tanto algún error
de sintaxis que se presente éste no lo detectará y se
visualizara en la forma como éste lo entienda).
• El entorno para trabajar HTML es simplemente un procesador
de texto, como el que ofrecen los sistemas operativos
Windows (Bloc de notas o el que ofrece MS Office (Word).
• El conjunto de etiquetas que se creen, se deben guardar con
la extensión .htm o .html
• Estos documentos pueden ser mostrados por los visores o
“browsers” de paginas Web en Internet, como Netscape
Navigator, Opera y Microsoft Internet Explorer.

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Orígenes del HTML

Fue creado en 1986 por el físico nuclear Tim Berners-Lee en base a dos
herramientas preexistentes:

• 1986. Publicación de la ISO 8879 que presenta el Standard General Markup Language, origen del
HTML.
• 1989. Tim Berners-Lee, en el Centro Europeo de Investigaciones Nucleares presenta el artículo
Information Management: A Proposal.
• 1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized
Markup Language), que más tarde se llamará nivel 0; soporta encabezados, listas y anclas. Se crea
el nombre World Wide Web.
• 1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo texto y
sólo en plataformas UNIX. El CERN realiza la apertura del primer sitio con acceso público de WWW
(http://info.cern.ch)).
• 1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD) para el lenguaje,
llamada HTML 1.0. Se distribuye Viola, primer visor gráfico de Web y disponible sólo para X.11.
• 1993. Visor Lynx, (Universidad de Kansas), Solo texto.
• 1993 Aparece Mosaic, desarrollado por el Centro Nacional para Aplicaciones de Supercomputadoras,
es el primer visor de Web en entorno gráfico que se hace disponible para computadoras personales.

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS
Página web típica

Imágenes Títulos
y
subtítulos

Párrafos
de
Menú
Lateral
Muchos Links texto

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Ejemplo : Página HTML básica

<HTML>
<HEAD>
<TITLE>Mi Primera Página Web</TITLE>
</HEAD>
<BODY>
Bienvenido a mi Página Web personal.
<BR>
<BR>
Aquí se puede insertar textos y contenido.
</BODY>
</HTML>

Fuente : Asociación de Internautas ( http://www.internautas.org/curso_html/ )

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Ejemplo : Página HTML básica

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Párrafos
Un párrafo es un conjunto de frases que se escriben en secuencia.

En HTML deben estar encerrados entre:

<p> y </p>

Ejemplo:

<p>
Aquí se debe escribir el texto del párrafo con la extensión que sea
Necesaria
</p>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Alineación de los textos en los párrafos

Se usa la clausula align para alinear el texto:

<p align="left">Texto alineado a la izquierda</p>

<p align="center">Texto alineado al centro</p>
<p align="right">Texto alineado a la derecha</p>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Clausula Blockquote
Se usa para escribir un párrafo parafraseado (como una cita) el cual aparecerá con un
margen a la izquierda y otro a la derecha:

<p>Por jemplo, los siguientes párrafos se verán de la

siguiente manera:
</p>
<blockquote>
Puede contener varias lineas<br>
Poner al final de cada línea un salto de línea (BR)<br>
Habrá un espacio en el margen izquierdo<br>
Habrá otro espacio en el margen derecho<br>
</blockquote>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Formato para una dirección:

Para escribir una dirección de una forma especial se utiliza la clausula
address:

<p>El formato de dirección en HTML tiene el siguiente efecto:</p>

<address>
Universidad de Santiago de Chile.<br>
Avenida Bernardo O'Higgins 3363<br>
Comuna de Estación Cnetral<br>
Santiago de Chile<br>
CHILE
</address>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Títulos y subtítulos (cabeceras)

En HTML existen seis tipos de tamaños de letras que pueden utilizarse para
poner títulos y subtítulos:

Ejemplo:

<h1>Tamaño de cabecera 1</h1>

<h2>Tamaño de cabecera 2</h2>
<h3>Tamaño de cabecera 3</h3>
<h4>Tamaño de cabecera 4</h4>
<h5>Tamaño de cabecera 5</h5>
<h6>Tamaño de cabecera 6</h6>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Otras formas de formatear rápidamente un texto

Existen diversas formas de alterar la visibilidad de las palabras y los
caracteres, entre las más frecuentes se encuentran:

Ejemplo:

<b>Este párrafo esta en negrita</b> <br>

<i>Este párrafo esta en cursiva</i> <br>
<em>Este párrafo esta enfatizado</em> <br>
<b>Este párrafo esta en
^superíndice </b> <br>
<b>Este párrafo esta en
_subíndice </b> <br>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Listas numeradas y no numeradas

Es posible establecer listas de párrafos numerados o no numerados:

Ejemplo:

<p>Esta es una lista numerada:</p>

<ol>
<li>Párrafo uno …</li>
<li>Párrafo dos …</li>
<li>Párrafo tres …</li>
</ol>

<p>Esta es una lista <b>no</b> numerada:</p>

<ul>
<li>Párrafo uno …</li>
<li>Párrafo dos …</li>
<li>Párrafo tres …</li>
</ul>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Listas descriptivas
En lugar de enumerar o itemizar, las listas descriptivas permiten poner
palabras o conceptos a los cuales se asocia un texto descriptivo:

Ejemplo:

<p>Esta es una lista descriptiva:</p>

<dl>

<dt>HTML</dt>
<dd>Es un lenguaje de marcos que sirve para
construir documentos de hipertexto.</dd>

<dt>Python</dt>
<dd>Es un lenguaje de programación que consta de
instrucciones de control de flujo, tipos de datos y
estructuras de datos.</dd>

</dl>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Vínculos, hipervínculos o enlaces

Un hipervínculo o enlace en HTML es una referencia a otra página web zona de una
página web, que permite al lector elegir distintas alternativas de acceso a los
documentos .

Se establece de la siguiente forma:

Ejemplo:

<p> Aquí se debe escribir el texto del párrafo y el

<a href = ‘http://www.usach.cl’ > texto del hipervínculo </a>

que aparecerá por defecto en color azul.

</p>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Ejemplo:

Es la URL a Es el testo
donde se al que se
enlaza el asocia el
texto. link

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Agregar una imagen a la página web

Agregar una imagen tal cual es (sin modificar su aspecto):

<img src=“foto.jpg" alt="Esta es mi foto">

Agregar una imagen centrada en la ventana:

<center>
<img src=“foto.jpg" alt="Esta es mi foto">
</center>

Cambiar el tamaño a la imagen (en pixeles):

<img src=“foto.jpg“ width="200" height=“300“>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.

 La Web y los LMS

Ejemplo:
<h3>Tamaño natural</h3>

<img src='leon.png' alt="Esta es mi foto">

Tamaño natural centrada
<h3></h3>

<center>
<img src='leon.png' alt="Esta es mi foto">
</center>

<h3>Tamaño ajustado a 100x150 pixels</h3>

<img src='leon.png' width="100" height=“150“>

<h3>Tamaño alustado al 20% de la pantalla</h3>

<img src='leon.png' width="20%" height=“20%“>

Informática Educacional - Licenciatura en Química y Biología Prof. Fredi Palominos V.