UNIDAD I: HIPERTEXT MARKUP LANGUAGE  

1. INTRODUCCIÓN AL HTML – HTML5 

INTRODUCCIÓN: 

El  HTML  (Hyper  Text  Markup  Language)  es  un  lenguaje  que  sirve  para  escribir  hipertexto,  es  decir, 

documentos  de  texto  presentado  de  forma  estructurada,  con  enlaces  (links)  que  conducen  a  otros 

documentos o a otras  fuentes de  información, que pueden estar en  tu propia máquina o en máquinas 

remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y 

sonidos seamos capaces de imaginar. 

Por supuesto, la estética de los documentos escritos en HTML no se limita a texto digamos normal; consigue 

todos  los efectos que habitualmente se pueden producir con un moderno procesador de textos: negrita, 

cursiva, distintos tamaños y fuentes, tablas, párrafos tabulados, sangrías, incluso texto y fondo de página de 

colores, y muchos más. 

Para la comprensión de este tipo de lenguaje, el único requisito es el tener interés por el mismo, ya que éste 

y sólo éste será el único impedimento que se nos imponga a lo largo del manual. El lenguaje en sí es sencillo 

de  entender  y  no  hace  falta  ningún  tipo  de  requisito  de  conocimientos  informáticos  avanzados  ni  de 

programación en ningún tipo de lenguaje, ya que el HTML como tal NO es un lenguaje de programación, sino 

un lenguaje de presentación de información y documentos varios. Por ello y como comprobarás al final del 

documento, y con el tiempo, publicar documento en HTML, será tan sencillo como encender el ordenador y 

navegar por la red Internet. Un aliciente a mayores, es que desde aquí me comprometo a estar disponible y 

que en cualquier momento puedas enviarme un mail con las dudas que creas que no quedan claras en este 

manual, intentando solucionarlas con la mayor brevedad posible. 

 

BREVE HISTORIA DEL LENGUAJE HTML: 

El lenguaje HTML nace en 1991 de manos de Tim Berners‐Lee de CERN como un sistema hipertexto con el 

único objetivo de servir como medio de transmisión entre físicos de alta energía como parte de la iniciativa 

WWW.  En  1993  Dan  Connelly  escribe  el  primer  el  primer  DTD  (Document  Type  Definition)  de  SGML 

describiendo el  lenguaje. En 1994  el  sistema había  tenido  tal aceptación que  la especificación  se había 

quedado ya obsoleta. Por aquel entonces WWW y Mosaic eran casi sinónimos debido a que el browser 

Mosaic del NCSA  (National Center  for  Supercomputing Applications)  era  el más  extendido debido  a  las 

mejoras que incorporaba. 

Era  entonces  cuando  nace  HTML  2.0  en  un  draft  realizado  también  por  Dan  Connelly.  El  crecimiento 

exponencial que comienza a sufrir el sistema  lleva a organizar  la First International WWW Conference en 

Mayo de 1994. El principal avance de  la versión 2.0 de HTML es  la  incorporación de  los  llamados  forms, 

formularios  que  permiten  que  el  usuario  cliente  envíe  información  al  servidor  y  ésta  sea  recogida  y 

procesada  allí:  Precisamente  con  este  fin,  NCSA  presenta  la  especificación  del  CGI,  Common  Gateway 

Interface,  versión  1.0  que  define  un  interfaz  entre  programas  ejecutables  y  el  sistema WWW.  Con  la 

incorporación de los forms, aparece por primera vez campos donde el usuario puede escribir, menús pull‐

down y los denominados radio‐buttons (pulsadores) integrados en páginas WWW. 

Desde entonces el Lenguaje ha seguido creciendo como algo dinámico como una lengua humana, algo vivo, 

siendo modificado sobre todo por las personas que lo utilizan. Así, una evolución con el lenguaje suele seguir 

de una propuesta que es adoptada por algunos clientes  (browsers). Con el uso se ve si es eficiente y es 

adoptada y si es así, finalmente se incorpora al standar. 

HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, 

texto  presentado  de  forma  estructurada  y  agradable,  con  enlaces  (hyperlinks)  que  conducen  a  otros 

documentos o  fuentes de  información  relacionadas, y con  inserciones multimedia  (gráficos, sonido...) La 

descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto 

normal,  enumeraciones,  definiciones,  citas,  etc)  así  como  los  diferentes  efectos  que  se  quieren  dar 

(especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y 

dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado 

 

DIRECTIVAS DEL HTML:  

El HTML está en continuo desarrollo, por lo que en un principio sólo existe un HTML estándar que es el que 

se denomina  SGML  (Standart Generalized Makeup  Language), que es  lenguaje estándar  reconocido por 

todos los navegadores. Sólo hay una versión (por el momento), que es la 1.0 y las desventajas que posee 

sobre el HTML es que es un poco pobre de contenidos, ya que no actualiza las nuevas directivas que están 

en continuo desarrollo. 

Las directivas en HTML son aquellas “ordenes” que se hallan entre los símbolos <...> y que son de 2 clases: 

abiertas y cerradas. 

Abiertas 

Son aquellas directivas que no necesitan ser cerradas para que su acción sea comprendida por el navegador 

(<HR>, <BR>, ...) 

Cerradas 

Son aquellas directivas que para ser comprendidas por el navegador, deben indicar en dónde comienzan y 

en dónde terminan. Son las más, y cuando indican al navegador que cierran la directiva poseen el formato 

</DIRECTIVA> donde DIRECTIVA es la “orden” que queremos cerrar. El texto o imágenes o elementos que 

se  hallan  entre  las  2  directivas  <DIRECTIVA>...</DIRECTIVA>  quedan  afectadas  por  la  acción  de  dicha 

DIRECTIVA en su totalidad (<H1>...</H1>, <TABLE>...</TABLE>, ...). 

 

Las directivas en HTML no tienen por qué ser escritas en mayúsculas, ya que pueden escribirse sin lugar a 

errores  en minúsculas. En este  texto,  las directivas  se  emplearán  en mayúsculas para mayor  claridad  y 

destaque del código HTML, del resto de texto. 

 

Entre otras cosas, el manejo de estas etiquetas nos permitirá: 

Definir la estructura lógica del documento html 

Aplicar distintos estilos de textos. 

La inclusión de hipervínculos, que nos permitirá acceder a otros documentos relacionados con el actual. 

La inclusión de imágenes y ficheros multimedia. 

 

QUÉ NECESITAMOS PARA CREAR UN DOCUMENTO HTML: 

Un  procesador  de  textos  para  escribir  y  editar  el  código HTML.  Este  podrá  ser  cualquiera  que  no 

formatee el texto, ya que el  leguaje HTML está basado en el código ASCCI. Si usamos un procesador 

como el Word, tendremos que guardar el documento como "sólo texto".  

Un navegador Web como el Explorer, Netscape, Mosaic, etc., el cual se encargará del  interpretar el 

código HTML de nuestro documento y mostrárnoslo en todo su esplendor.   

 

LA SECUENCIA DE TRABAJO PARA CREAR DOCUMENTO HTML ES: 

1. Con  el  procesador  de  texto  crearemos  el  documento HTML  y  lo  guardaremos  con  el  nombre  que 

deseemos, a excepción de la extensión, que deberá ser necesariamente .htm ó .html.  

2. Para visualizar nuestro documento HTML abriremos el documento con el programa  navegador. 

 

2. LA PRIMERA PÁGINA WEB EN HTML 

a) Etiqueta HTML: 

El documento HTML debe estar limitado por la etiqueta <html> y </html>, así mismo está estructurado 

en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo) 

 b) Etiquita HEAD: 

En  la cabecera de un documento HTML  incluiremos  las definiciones generales que afecten a todo el 

documento, como por ejemplo el título de la página que aparecerá en la parte superior de la ventana 

del navegador.  

Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la cabecera de nuestro documento. Todas 

la etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos 

la etiqueta <TITLE> correspondiente al título del documento. 

 c) Etiqueta TITLE: 

El  título de nuestro documento viene especificado por  las etiquetas: <TITLE> y </TITLE> y, como ya 

hemos mencionado, este título es el que aparecerá en  la ventana de nuestro programa navegador. Lo 

normal y recomendable es que el título guarde relación con el contenido de nuestro documento, ya que 

por ejemplo es utilizado por algunos servidores de búsqueda para poder intuir el contenido de nuestro 

documento. 

  

d) Etiqueta <META>: 

Proporciona  información  para  que  los  programas  de  búsqueda  (como  google.com,  yahoo.com, 

altavista.com)  encuentren  nuestra  página.  A  continuación  se  da  un  ejemplo  de  la  aplicación  de  la 

directiva META: 

 

e) Etiqueta <BODY>:  

Define el cuerpo del texto del documento, es la sección principal en la cual va el contenido de nuestra 

página. La directiva <BODY> admite varios atributos, los más importantes son:  

BGCOLOR=color de fondo  

TEXT= color del texto de la página  

LINK=color del texto o link de enlace  

VLINK= color del texto o link de enlace visitado  

ALINK= color del texto o link de enlace activo  

BACKGROUND="imagen de fondo"  

Ejemplo:  

<BODY BGCOLOR=black text=white link=blue vlink=red>: Fija el color del fondo negro, el texto blanco, 

el enlace azul y el enlace visitado rojo. 

  

• bgcolor=#rrggbb ó name  {bgcolor: Background Color: Nos va a permitir definir un color para el 

fondo  de  nuestro  documento.  Este  atributo  será  ignorado  si  previamente  hemos  utilizado  el 

atributo background. 

    

El siguiente cuadro muestra los colores a utilizarse:  

 

Nombre  Código de color Color mostrado

Black  #000000 Negro

Teal  #008080 Teal

Blue  #0000FF Azul

Navy  #000080 Azul marino

Lime  #00FF00 Lima

White  #FFFFFF

Purple  #800080 Púrpura

Yellow  #FFFF00 Amarillo

Olive  #808000 Oliva

Red  #FF0000 Rojo

maroon  #800000 Marrón

gray  #808080 Gris

fuchsia  #FF00FF Fucsia

green  #008000 Verde

silver  #C0C0C0 Plata

aqua  #00FFFF Agua

 

• background="URL": Nos  va a permitir mostrar una  imagen  como  fondo de nuestro documento 

HTML. El camino a esta  imagen vendrá especificado por  la URL que definamos. Si  la  imagen no 

rellena todo el fondo del documento, ésta será reproducida tantas veces como sea necesario hasta 

completar todo el fondo.  

   

• Text=#rrggbb ó name: Nos permitirá definir un  color para el  texto de nuestro documento. Por 

defecto es negro. 

     

• Link=#rrggbb ó name: Indica el color que tendrán los hiperenlaces que no han sido accedidos. Por 

defecto es azul. Como todavía no sabemos insertar hiperenlaces en nuestro documento vamos a 

dejar el ejemplo correspondiente para más adelante.  

 

• Vlink=#rrggbb ó name  {vlink: Visited  Links}:  Indica el  color de  los hiperenlaces que  ya han  sido 

accedidos. Por defecto es púrpura.   

 

f) Estructura básica de un documento HTML: 

Queda de la siguiente manera: 

  

Ejemplo: El contenido de la etiqueta Title es Mi sitio Web, de la etiqueta Body es Contenido del cuerpo, 

para visualizar el resultado en un navegador, los primero que debemos hacer el guardar el archivo con 

extensión html, para luego ubicar el archivo desde el Explorador de Windows. 

      

Se recomienda que el primer archivo a guardar sea con el nombre de INDEX.HTML, ya que todo portal 

Web presenta su primera página con este nombre. 

 

3. FORMATO DE TEXTO Y CARACTERES ESPECIALES EN HTML 

a) Texto como encabezado: 

<H1>...<H6> H: Heading: En un documento HTML podemos incluir seis tipos distintos de cabeceras, que 

van a constituir normalmente el título y los distintos subapartados que forman el documento, aunque 

podremos utilizarlas en  el punto que queramos del documento para  resaltar  cualquier  texto. Estas 

cabeceras son   definidas por  las etiquetas <H1><H2><H3><H4><H5> y <H6>. El texto que componga 

cada cabecera deberá estar incluido entre las etiquetas de inicio (<Hn>) y fin (/Hn) correspondiente. La 

cabecera <H1>será la que muestre el texto de mayor tamaño, este tamaño irá disminuyendo hasta llegar 

a la cabecera </H6>. 

Ejemplo: 

    

b) Formato de fuente: 

• Texto en negrita: 

<B> </B>: Texto en negrita 

• Texto inclinado: 

<I> </I>: texto inclinado o en cursiva 

• Texto subrayado: 

<U> </U>: Texto subrayado 

• Texto en modo teletype: 

<TT> </TT>: Texto en modo de teletype 

• Texto tachado: 

<S> </S>: texto tachado 

• Texto superíndice: 

<SUP> </SUP> Texto en modo superíndice  

• Texto subíndice: 

<SUB> </SUB>: Texto en modo de subíndice  

 

c) Efectos de texto: 

<FONT> </FONT>: Para aplicar efectos más resaltantes al texto de un documento HTML, debemos varias 

el tamaño, el color y el tipo de letra. Y esta etiqueta FONT nos permite realizar esos trabajos, según el 

siguiente formato: 

SIZE:  El  atributo  size nos permite  especificar  un  tamaño determinado para  la  fuente del  texto 

incluido entre la etiqueta de inicio y fin, el cual puede estar entre 1 y 7. El texto de tamaño normal 

equivale a la fuente número 3 (fuente base). Por tanto, si especificamos size=+2, el tamaño de la 

fuente será 5, y si especificamos size=‐1, el tamaño será 2. 

Ejemplo: 

  

COLOR:  Nos  permite  definir  el  color  que  tendrá  el  texto  incluido  entre  las  etiquetas: 

color=”nombre”. 

Ejemplo: 

  

FACE: Nos va a permitir escribir texto con tipo de letra que le especifiquemos. En el caso de que el 

tipo de  letra que  le hayamos especificado no esté cargada en el ordenador que  lee  la página, se 

usará el Font por defecto el navegador. 

Ejemplo: 

 

d) Alineación de texto: 

• Texto alineado al centro: 

Align= "center" texto centrado 

• Texto alineado a la izquierda: 

Align=  "left"  texto  alineado  a  la 

izquierda 

• Texto alineado a la derecha: 

Align=  "right"  texto  alineado    a  la 

derecha 

• Texto justificado: 

Align= "justify" texto justificado 

 

e) Manejo de párrafos: 

• Determinar un párrafo 

<P></P>: Permite definir un párrafo, introduciendo normalmente un espacio de separación de dos 

líneas con el texto siguiente al punto donde hayamos insertado esta etiqueta. 

La  etiqueta  de  fin  de  párrafo  es  opcional,  no  siendo  necesario  incluirla,  aunque  es  siempre 

recomendable delimitar claramente el inicio y el final de un párrafo. 

Esta directiva posibilita incluir el atributo de alineación: align. 

 

• Cambio de carro: 

<BR> BR:Break: Nos permite dar un salto a  la  línea siguiente en el punto donde  la etiqueta sea 

insertada. 

 

4. LISTA Y COMENTARIOS EN HTML 

a) Líneas de División: 

Nos permite insertar una  línea horizontal, cuyo tamaño podremos determinar a través de sus atributos. 

Si  no  especificamos  ningún  atributo  dibujará  una  línea  que  ocupe  el  ancho  de  la  pantalla  del 

navegador.  Su  utilidad  es  la  de  permitirnos  dividir  nuestra  página  en  distintas  secciones.  No  será 

necesaria la etiqueta de fin </HR>. 

El formato de la etiqueta con sus posibles atributos es: 

<HR align= left / right / center noshade size=n width=n > 

align= left / right / center. Permite establecer la alineación de la línea a la izquierda, a la derecha o 

centrarla. 

noshade. No muestra la sombra de la línea, evitando el efecto de tres dimensiones. 

size=n. Indica el grosor de la línea en pixels. 

width=n ó n%. Especificará el ancho de la línea, este se podrá especificar en pixels (n) o en tanto por 

ciento del ancho de la ventana (n%). 

Ejemplo: 

  

b) Lista desordenada: Con este tipo de  listas podemos especificar una serie de elementos sin un orden 

predeterminado, precedidos de una marca o  viñeta que nosotros mismos podemos definir. Para  la 

definición de los límites  de  la  lista  utilizaremos  la  etiqueta  <UL>....  </UL>,  y  para  determinar  cada  

uno  de  los elementos que la componen usaremos la etiqueta <LI>. El formato es el siguiente: 

Sintaxis: <ul type=circle ó square ó disk>  

     <li>Elemento2</li> 

    <li>Elemento2</li> … 

  </ul> 

Ejemplo: 

  

c) Lista ordenada: Con este tipo de listas podemos especificar una serie de elementos numerados según 

el lugar que ocupan en la lista. Para la definición de los límites de la lista utilizaremos la etiqueta <OL>.... 

</OL>, y para determinar cada uno de  los elementos que  la componen usaremos  la etiqueta <LI>. El 

formato es el siguiente: 

Sintaxis: <ol star=”n” type=”Tipos de lista”>  

     <li>Elemento1</li> 

    <li>Elemento2</li> … 

  </ol> 

Con el atributo start vamos a especificar el número por el que va a empezar la lista. Si no indicamos este 

argumento la lista empezará a numerarse a partir del 1. Con el atributo type vamos a especificar el tipo 

de lista numerada. 

A: Letras mayúsculas (A, B, C, ...) 

a: Letras minúsculas (a, b, c, ...) 

I: Números romanos en mayúsculas (I, II, III, IV, ...) 

i: Números romanos en minúsculas (i, ii, iii, iv, ...) 

1: Numéricamente (1, 2, 3, 4, ....) (es la numeración por defecto y por tanto no habría que indicarla). 

Ejemplo: 

          

  

d) Lista de definición: Estas listas nos van a servir para especificar una serie de términos y sus definiciones 

correspondientes. Para la definición  de la  lista usaremos la etiqueta <DL>.... </DL>, para especificar los 

términos usaremos  la etiqueta <DT> y para especificar  la definición correspondiente a cada término 

usaremos la etiqueta <DD>. El formato es el siguiente: 

 

 

e) Caracteres especiales: 

Hasta ahora hemos escrito algunos ejemplos de código HTML, pero hemos pasado por alto algunas 

limitaciones  de  HTML  respecto  al  uso  de  caracteres  especiales.  Una  de  estas  limitaciones  es,  por 

ejemplo, el uso de  los caracteres < y >, que como ya sabemos  indican el  inicio y fin de una etiqueta 

HTML.  Pues  bien,  si  quisiéramos  escribir  estos  caracteres  como  parte  normal  de  un  texto,  el 

navegador no sabría si se trata de texto normal o del comienzo y final de una etiqueta, o sea, que se 

haría un lío. 

 

Símbolo  Código 

< (menor que)  &lt; 

> (mayor que)  &gt; 

& (ampersand)  &amp; 

" (comillas)  &quot; 

Para las letras específicas del idioma castellano: las vocales acentuadas, la ñ, la ü y los signos ¿ y ¡, existen 

los códigos que muestra en la tabla siguiente: 

Letra  Código    Letra  Código  Letra  Código 

á  &aacute;  Á  &Aacute;  ñ  &ntilde; 

é  &eacute;  É  &Eacute;  Ñ  &Ntilde; 

í  &iacute;  Í  &Iacute;  ü  &uuml; 

ó  &oacute;  Ó &Oacute;  Ü  &Uuml; 

ú  &uacute;  Ú &Uacute;  ¿  &#191; 

      ¡  &#161; 

 

Ejemplo: 

 

  

f) Comentarios: Para la inclusión de comentarios en nuestra página HTML, podemos usar la etiqueta: <!‐‐  

‐‐>. Estos comentarios nos podrán servir para efectuar anotaciones en nuestro documento HTML que 

ayuden  a  una mayor  comprensión  del  código.  En  el  Código  fuente  10  se muestra  un  ejemplo  de 

comentario. <!-- Esto es un comentario y no será mostrado por el navegador -->